React JS等待useContext更改

import React, { useContext, useEffect, useState } from 'react';

const MyContext = React.createContext();

function MyComponent() {
  const [data, setData] = useState(null);
  const contextValue = useContext(MyContext);

  useEffect(() => {
    // 监听上下文变化
    if (contextValue !== null) {
      setData(contextValue);
    }
  }, [contextValue]);

  return (
    <div>
      {data ? <p>{data}</p> : <p>Loading...</p>}
    </div>
  );
}

export default MyComponent;

import React, { useContext, useMemo } from 'react';

const MyContext = React.createContext();

function MyComponent() {
  const contextValue = useContext(MyContext);

  const processedValue = useMemo(() => {
    // 对上下文值进行处理
    return contextValue + ' processed';
  }, [contextValue]);

  return (
    <div>
      <p>{processedValue}</p>
    </div>
  );
}

export default React.memo(MyComponent);