useState | useEffect without setting new state casues additional rerender

Question

I couldn't find any information why this render is called twice ?

const Test: React.FC = () => {
  const [myState, setMyState] = useState();

  console.log("RENDER TEST");
  return <div>test</div>;
};

When I remove

const [myState, setMyState] = useState();

then the component is rendered only once.

The same happens with useEffect:

const Test: React.FC = () => {
  useEffect(() => {
   console.log("Component mounted");
  }, []);

  console.log("RENDER TEST");
  return <div>test</div>;
};

Without useEffect the render is called only once.

Possible Duplicate of [Why does useState cause the component to render twice on each update?](https://stackoverflow.com/questions/61578158/why-does-usestate-cause-the-component-to-render-twice-on-each-update/61578206#61578206) — Shubham Khatri, May 25 '20 at 15:46

score 0 · Accepted Answer · answered May 25 '20 at 14:36

It is happening due to React's StrictMode in order to detect any problems and to want you about them. It runs only in development and not in production. In your application in index.js you will find that your App component is wrapped with React.StrictMode component. You can read more about it https://reactjs.org/docs/strict-mode.html

useState | useEffect without setting new state casues additional rerender

1 Answers1