MyComponent.js

const useFoo = () => {
  const [bar, setBar] = useState(false);
  const [baz, setBaz] = useState(false);

  // should not trigger MyComponent to re-render   
  useEffect(() => {
    setTimeout(() => setBar(true), 1000);
  }, []);

  // should trigger MyComponent to re-render
  useEffect(() => {
    setTimeout(() => setBaz(true), 2000);
  }, []);

  return bar && baz;
}

const MyComponent = () => {
  const foo = useFoo();

  return <h1>{String(foo)}</h1>
}