Laravel + InertiaJS + ReactJS Components Renders Twice

Question

So I am currently developing a web application and noticed that some of my components renders twice and I am not really sure why and also that console.log appears twice in the console. I am sure that I am only calling the console.log once and the toast once.

I have read about the strict mode in reactjs but I am unsure if it is enabled or not since I can't find it in my source code.

Here's my app.jsx

import '../css/bootstrap/bootstrap.min.css';
import '../css/bootstrap-icons-1.10.3/bootstrap-icons.css'
import '../css/dhca-base.sass'

import React from 'react';
import { createInertiaApp } from '@inertiajs/react'
import { createRoot } from 'react-dom/client'

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,

    resolve: name => {
        const pages = import.meta.glob('./Pages/**/*.jsx', { eager: true })
        return pages[`./Pages/${name}.jsx`]
    },
    setup({ el, App, props }) {
        createRoot(el).render(<App {...props} />)
    },
})

I also have the reactjs development extensions in my browser and it shows me a warning sign near the Inertia title.

Does this answer your question? [Why useEffect running twice and how to handle it well in React?](https://stackoverflow.com/questions/72238175/why-useeffect-running-twice-and-how-to-handle-it-well-in-react) — Youssouf Oumar, Jan 29 '23 at 09:03
By removing the `StrictMode` tag that wraps `App` inside `index.js`, but I don't recommend it. Go through the answer to the above post; you would find more information. — Youssouf Oumar, Jan 29 '23 at 09:11
Look for `StrictMode` in your editor search input. Aren't you using React version 18? — Youssouf Oumar, Jan 29 '23 at 09:14
I am using ReactJS along side with InertiaJS, if that helps, not entirely sure about what version I am using exactly — Jheems, Jan 29 '23 at 09:18
Do you have a `package.json` file? If so, look inside for the version. — Youssouf Oumar, Jan 29 '23 at 09:19
thank you very much for the help @yousoumar I have finally figured it out thanks! — Jheems, Jan 29 '23 at 09:32

score 0 · Accepted Answer · answered Jan 29 '23 at 09:33

0

Turns out everything is set up correctly and I was just not using the useEffect hook correctly.

answered Jan 29 '23 at 09:33

Jheems

300
1
4
11

Laravel + InertiaJS + ReactJS Components Renders Twice

1 Answers1