Level 51
Mostly, you're using StrictMode in your React part. Which invoking the component twice to detect side effects.
Jul 3, 2024
7
Level 1
Render pages 2 times
Help me understand what I'm missing. Laravel, Inetria, React
app.jsx
import './bootstrap';
import '../scss/app.scss';
import { create Inertia App } from '@inertiajs/react'
import { hydrate Root } from 'react-dom/client'
create Inertia App({
resolve: name => {
const pages = import.meta.glob('./Pages/**/*.jsx', { eager: true })
return pages[`./Pages/${name}.jsx`]
},
setup({ el, App, props }) {
hydrate Root(el, <App {...props} />)
},
})
ssr.jsx
import ReactDOMServer from 'react-dom/server';
import { createInertiaApp } from '@inertiajs/react';
import createServer from '@inertiajs/react/server';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { route } from 'ziggy-js';
createServer((page) =>
createInertiaApp({
page,
render: ReactDOMServer.renderToString,
resolve: (name) => resolvePageComponent(`./Pages/${name}.jsx`, import.meta.glob('./Pages/**/*.jsx')),
setup: ({ App, props }) => {
global.route = (name, params, absolute) =>
route(name, params, absolute, {
...page.props.ziggy,
location: new URL(page.props.ziggy.url),
});
return <App {...props} />;
},
})
);
Pages/Index.jsx
import { Head } from '@inertiajs/react';
export default function StartApp() {
console.log('StartApp') // <------ O_o
return (
<>
<Head title="Welcome" />
<b>TEST WORK</b>
</>
);
}
When I go to the page in the console, I get console.log output 2 times Is it related to SSR or am I loading pages incorrectly?
Thank you.
Level 1
Thank you for your help. I looked at the documentation: react.dev/reference/react/StrictMode
There are no <StrictMode> elements in my code If you add it, console.log() is displayed 4 times.
I tried to install laravel({...., refresh: false} in vite.config), built it for production
Behavior doesn't change. The output in the console still happens 2 times. Tell me what else I should watch and check?
Level 51
@Xma Try add console.log inside useEffect and see if it renders twice or not.
Level 1
@MohamedTammam Did I understand correctly what needs to be checked?
Index.jsx
import {useEffect} from "react";
export default function StartApp() {
//console.log('StartApp')
useEffect(() => {
console.log('StartApp')
}, []);
return (
<b>TEST WORK</b>
);
}
The console displays "StartApp" once. The second output in the console is empty.
Level 51
@Xma Then that's the right behavior. The following code runs once only when the component renders
useEffect(() => {
console.log('StartApp')
}, []);
If you don't have StrictMode and you see the console.log once, then that's the right behavior.
The component function itself (StartApp) is going to run multiple times.
1 like
Level 1
@MohamedTammam I was afraid that I was rendering 2 times because of my mistakes. So this is the normal behavior of the function and everything is working correctly
Thank you for your help. The first steps into the unknown are always difficult =)
1 like
Level 12
@MohamedTammam This useEffect runs on initial mount only. If we want to check if the component is re-rendering using a useEffect, we have to omit the empty dependency array. That way, the useEffect runs on every re-render. When we do this, we can see that indeed the component is re-rendering twice. I think this is an ongoing issue with Inertia + React.
Please or to participate in this conversation.