Induce re-render from other component 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?

AKX · Accepted Answer · 2019-11-04 17:16:17Z

2

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>
  );
};

edited Nov 4, 2019 at 17:16

answered Nov 4, 2019 at 16:43

AKX

171k16 gold badges147 silver badges229 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

marzelin Over a year ago

the next state is calculated based on the current state. You should use an updater function instead of relying on closures

marzelin Over a year ago

and that's not how useMemo works. Maybe you wanted useCallback?

AKX Over a year ago

@marzelin Ah, yeah, good point. (Quoth the docs, though: useCallback(fn, deps) is equivalent to useMemo(() => fn, deps) – I was almost there :) )

Mattia Over a year ago

this is not working, it doesn't make any difference.

Mattia Over a year ago

I think the only solution to this is to use a class component and implement a shouldComponentUpdate method.

|

Collectives™ on Stack Overflow

Induce re-render from other component React.js

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related