Tengo un gancho personalizado que se ve más o menos así:

 export default function useMyHook() { const [foo, _setFoo] = useState([]); const [bar, setBar] = useState(null); const setFoo = (arg) => { _setFoo(arg); const newBar = getBar(arg); setBar(newBar); }; useEffect(() => { console.log(bar); // this prints when bar changes }, [bar]); return { foo, bar, setFoo, }; }

Y este gancho se usa así:

 export const function MyComp(): React.MixedElement { const {foo} = useMyHook() console.log(foo) // prints null once useEffect(() => { console.log(foo) // doesn't print }, [foo]) return foo ? ( <div>This doesn't render</div> ) : ( <div>This renders</div> ) }

Se llama a setFoo() en un componente diferente para establecer foo. Cuando eso sucede, la bar cambia y ejecuta la devolución de llamada useEffect , pero no en el componente.

¿Qué está pasando aquí y cómo puedo solucionarlo?