React useEffect inside parent component doesnt rerender by changes inside child

Question

I have App component which returns only a react component called Home. Inside App component, I have a useEffect which has no dependancy, in order to trigger any changes. I expect the App useEffect to rerender when something changes in the home component, but this doesnt happen. Doesnt react support such thing?

Answer 1

This is not supported out of the box. The child will rerender when parent rerenders but not the other way around.

If every parent rerenders when a child rerender, then even a tiny button state change will cause the whole tree to rerender.

You have callbacks that can help you get around this. The child should be passed a callback function as a prop. Inside this callback function body the parent state will be updated. So now when this function runs (from within the child). The parent also rerenders.