How many times a component render before display?

Question

When I read the document for the useEffect the component will render only one time if I recall correctly.

But in the bottom scenario the initial render is empty. But after a sec or two it will render again to show that data coming from api.

So it basically render two times before showing the data am I wrong?

const SomeComponent = () => {

  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('...').then((res) => setData(res.data)).catch((err) => console.log(err))
  }, []);

  return (
    <div>{data.map((e) => (e...)}</div>
  )
}

Answer 1

Your problem is possibly from React.StrictMode

Strict mode can’t automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions:...

Well, it's helpful in debugging during development but this side effect makes useEffect called twice intentionally.

One side note is these double callings won't be happening in production, so you don't need to worry about it.

If you want to avoid intentionally double-invoking in development, you can remove React.StrictMode permanently in your code.