useEffect callback never called

I want to report a bug. My problem is that the callback function I pass to useEffect() is never called in my app. I uploaded a minimal app here that reproduces the issue.

As you can see, I render a couple of nested components. After the initial render, I update the component state inside a useEffect() callback. However, this callback is only executed for the first two components, not for the third level component. The result is that the third and subsequent levels are not rendered at all.

I suspect that this is a bug in React and not a misuse on my side because doing any of the following changes will let the component tree render correctly in all levels:

• Don’t use multiple React roots. If I remove the last (yellow) ReactDOM.render() call, then the second (red) component tree will render correctly.
• Don’t conditionally render child components. Removing the message !== DEFAULT_MESSAGE check (main.tsx, line 20) causes the component trees to render correctly.
• Use useLayoutEffect() instead of useEffect().

If you need additional information to reproduce the issue or have any questions, let me know. I’d like provide any help I can!

[vkurchatkin]

Here is somewhat minimal reproduction:

function useTest() {
  const [effect, setEffect] = useState(false);
  useEffect(() => {
    setEffect(true);
  }, []);

  return effect;
}

function A() {
  const effect = useTest();

  return (
    <div >
      {"" + effect}
      {effect && <B/>}
    </div>
  );
}

function B() {
  const effect = useTest();

  return (
    <div >
      {"" + effect}
      {effect && <C/>}
    </div>
  );
}


function C() {
  const effect = useTest();

  return (
    <div >
      {"" + effect}
    </div>
  );
}

function Other() {
  useEffect(() => {}, []);
  return null;
}


ReactDOM.render(
  <A/>,
  document.querySelector("#root1")
);

ReactDOM.render(
  <Other/>,
  document.querySelector("#root2")
);

Some observations:

• If you change the order of render()s, it works
• If you use useLayoutEffect, it works
• If Other doesn’t call useEffect, it works
• If the second render() is delayed, it works
• If B or C are rendered unconditionally, it works
• If setEffect is delayed, it works

[wahyuutomoputra]

https://github.com/react-navigation/hooks#only-for-react-navigation-v3--v4-not-v5