从其他组件 React.js 诱导重新渲染

Question

I'd like to induce a re-render from another component, avoiding the "triggering component" to re-render.

const App = () => {

    const [isPopUpActive, setIsPopUpActive] = useState(false)

    const popUpOnOff = () => {
        if(isPopUpActive)
            setIsPopUpActive(false)
        else
            setIsPopUpActive(true)
    }

    return (
        <div>
            <SomeComponent
                trigger={popUpOnOff}
            />
            <PopUpComponent
                isActive={isPopUpActive}
            />
        </div>
    )
}

I thought wrapping the SomeComponent with React.memo and changing a prop in the PopUpComponent would do it, but calling the trigger function in the SomeComponent re-renders everything. Is there a way to avoid the first component to re-render?

Answer 1

The identity of the popUpOnOff function changes on each render, so the memoized component can't do anything.

You will need to memoize that callback instead, making it depend on the data it uses:

const App = () => {
  const [isPopUpActive, setIsPopUpActive] = useState(false);

  const popUpOnOff = useCallback(() => {
    setIsPopUpActive(!isPopUpActive);
  }, [isPopUpActive, setIsPopUpActive]);

  return (
    <div>
      <SomeComponent trigger={popUpOnOff} />
      <PopUpComponent isActive={isPopUpActive} />
    </div>
  );
};