如何使用反应钩子在全局状态的叶值发生变化时有条件地渲染组件

Question

I am attempting to create a hook which allows a component to subscribe to a part of the global state changing. For example, imagine my state looks like this

{
   products: []
   userForm: {
     name: 'John Smith',
     dateOfBirth: '07/10/1991'
   }
}

The component which controls the dateOfBirth field in the userForm should only re-render if the dateOfBirth field changes.

Say I have some global state created using React context. Here is my attempt at subscribing to the field of the global state that that component cares about

function useField(field) {
  const [globalState, setGlobalState] = useContext(GlobalState);
  const value = globalState[field] || "initial";
  const setValue = useCallback(
    (value) => {
      setGlobalState((state) => ({
        ...state,
        [field]: value
      }));
    },
    [setGlobalState, field]
  );
  return [value, setValue];
}

Demo https://codesandbox.io/s/dawn-fog-ieqxs?file=/src/App.js:326-612

The above code causes any component which uses the useField hook to rerender.

The desired behaviour is that the component should only rerender when that field changes.

Answer 1

It can work, but not with Context API, as for now Context API can't bailout of useless renders.

In other words: components subscribed to context provider will always render on provider value change.

An example of Context API known problem:

const GlobalContext = React.createContext(null);

const InnerComponent = () => {
  /* eslint-disable no-unused-vars */
  const { uselessState } = useContext(GlobalContext);
  console.log(`Inner rendered`);
  return <></>;
};

const InnerMemo = React.memo(InnerComponent);

const InnerComponentUsingContext = () => {
  const { counter, dispatch } = useContext(GlobalContext);
  console.log(`Inner Using Context rendered`);
  return (
    <>
      <div>{counter}</div>
      <button onClick={() => dispatch()}>Dispatch</button>
    </>
  );
};

const InnerComponentUsingContextMemo = React.memo(InnerComponentUsingContext);

const App = () => {
  const [counter, dispatch] = useReducer((p) => p + 1, 0);
  const [uselessState] = useState(null);

  return (
    <GlobalContext.Provider value={{ counter, uselessState, dispatch }}>
      <InnerMemo />
      <InnerComponentUsingContextMemo />
    </GlobalContext.Provider>
  );
};

That said, using every modern state management solution has a bailout function which will resolve this issue:

// Always renders
const [globalState, setGlobalState] = useContext(GlobalState);
const value = globalState[field] || "initial";

// Bailout, for example with redux
const value = useReducer(globalState => globalState[field], /* Can add bailout function here if necessary */);