2

why my component is rendering twice?

export default function App() {
  console.log("asd");
  const [count, setCount] = useState(0);
  return (
    <div>
      <Title count={count} />
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      />
    </div>
  );
}


//console= "asd" "asd"

its rendering two times, but if I remove the useState it does not happen

A. Ecrubit
  • 561
  • 6
  • 20
rafs2459
  • 83
  • 1
  • 9
  • 2
    Because the app is wrapped in React.StrictMode and you are running in dev mode. – HMR May 01 '20 at 19:33
  • 4
    Does this answer your question? [React Hooks render twice](https://stackoverflow.com/questions/58603209/react-hooks-render-twice) – Estevan Maito May 01 '20 at 19:50

2 Answers2

3

Your app might be wrapped by React.StrictMode. StrictMode is a tool for highlighting potential problems in an application.

StrictMode currently helps with:

Identifying components with unsafe lifecycles

Warning about legacy string ref API usage

Warning about deprecated findDOMNode usage

Detecting unexpected side effects

Detecting legacy context API

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:

Class component constructor, render, and shouldComponentUpdate methods

Class component static getDerivedStateFromProps method

Function component bodies (your app is functional component)

State updater functions (the first argument to setState)

Functions passed to useState, useMemo, or useReducer

More Detail

Khabir
  • 5,370
  • 1
  • 21
  • 33
  • that's amazing!, just one little last question, if my component is a function (function component bodies) and also it have a useMemo function ,(Functions passed to useState, useMemo, or useReducer) it will render 4 or 2 times? It get me think that the component should render just 2 times, I am right? – rafs2459 May 02 '20 at 15:15
  • It should be 2 times but if you use useMemo then react will compare changes and if there is not change then it will prevent re render. On the other hand useState will re render the component there is any changes. To be more clear, please read https://reactjs.org/docs/hooks-reference.html – Khabir May 02 '20 at 15:22
0

For React 18: In development mode, components are remounted once! Handle it in useEffect with a cleanup function for stale responses.

from the link posted below, written by core react team member:

One reason is that if you're running with Strict Mode we now remount each component once during development. (If this seems pretty invasive, consider that we also remount every time you save a file in development anyway—to pick up your code edits. This behavior was on for two years by now, so it's not new.) This normally shouldn't break your code if your code ignores stale responses. If it doesn't, it means you have race conditions that need to be fixed — here is how to fix them by adding a cleanup function. If you used an external cache (or implemented it yourself), you wouldn't even see the duplicate requests. But dev-only duplicate requests aren't harmful if your code can handle the responses arriving out of order. (If they are too annoying, you can remove Strict Mode completely, but I don’t see why you'd need to.)

https://www.reddit.com/r/reactjs/comments/vi6q6f/what_is_the_recommended_way_to_load_data_for/

rarara
  • 161
  • 1
  • 7