Как в реакте понять, почему компонент всегда отрисовывается 2 раза?

Question

[Boris007]

Срабатывание консоли происходит два раза
Из-за чего компонент два раза отрабатывает?

export const loader: LoaderFunction = async () => {
  return []
}

export default function Root() {
    let { state } : {state: string} = useLocation()
    console.log('state', state)
    return (
      <>
        <div id="sidebar">
          <h1>React Router Contacts</h1>
        </div>
      </>
    );
  }

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    errorElement: <ErrorPage />,
    loader: rootLoader,
    children: [
      {
        path: "contacts/:id",
        element: <Contact />,
        loader: contactLoader
      },
    ],
  },
  {
    path: "/app",
    element: <App />,
    errorElement: <ErrorPage />,
  }
]);

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <Provider store={store}>
      <RouterProvider
        router={router}
      />
    </Provider>
  </React.StrictMode>
)

Answer 1

[Константин]

В реакте стоит режим StrictMode, он и отрисовывает второй раз, это из функционального программирования для проверки что функции чистые.
Но не волнуйся это работает только в режиме DEV

Comments

[Boris007]

Спасибо!

[chemdev]

Boris007, я чуть с ума не сошел от этого когда в первый раз писал на реакте