Bug: Sometimes useEffect() callback is called before render

[ildar-icoosoft]

From documentation: "What does useEffect do? By using this Hook, you tell React that your component needs to do something after render".

Here is example of my code

Please take a look at Square component. If you open this example you will see the animation of Square component.

It happens because of CSS. First we set
transform: translate(0px, 0px)
then we change it to:

transform: `translate(420px, 420px)`,
transition: `transform 5000ms`,

I use "useEffect" hook to change styles. useEffect is called after first render and the animation is started.

But in some cases this does not happen. Please take a look at "App" component. It renders Square and DropAreaWithDndContext components. DropAreaWithDndContext has "useDrop" hook. And if you use App component instead of Square component then the red square will not move.

Please change the last line from:
ReactDOM.render(<Square />, document.querySelector("#root"));
to
ReactDOM.render(<App />, document.querySelector("#root"));

You will see that the Square does not move. It will move only if you change:

useEffect(() => {
    setFirstRender(false);
}, []);

to this:

useEffect(() => {
    setTimeout(() => {
        setFirstRender(false);
    }, 0);
}, []);

So, in this example useEffect() callback is called before the first render.

React version: 16.8.6

Link to code example: https://codesandbox.io/s/reactjs-playground-4q9q8?file=/src/index.js

[vkurchatkin]

This has nothing to do with React, that's just how CSS transitions work

[ildar-icoosoft]

This has nothing to do with React, that's just how CSS transitions work

Why useDrop hook affected to this? (without useDrop() the animation works without setTimeout())

[vkurchatkin]

It's hard to tell exactly, but various work can affect the way a browser batches painting that can essentially disable transitions like this. You can read more about it here: reactjs/react-transition-group#159