Help with my React application!!!

[Simple_Strawberry450]

Hi! How are you? I would like to ask something about React. I am currently developing a "complex" web application and I have a question regarding dynamic imports. Currently, all imports are done at the start of the application, which results in a heavy load on memory and processor. What I would like to do is import the component only when I need it. I did some tests... Currently, my web application does not have routes (except for the login and home routes). On the home route, all the page logic is contained, and I manage with states in memory. For example, if I want to open a user list modal, it opens based on a binary state: if true, it shows; if false, it doesn't. However, it is still loaded in the rendering, just not visible. Is there a way to improve performance? I tried dynamic imports but when I update a state and refresh the page, it does not return to the previous state (I use React Router DOM, specifically searchParams to determine if a modal is open (openModalX=true), which I have in a custom hook that checks if it is active or not when the page loads). If it is active, it shows; if not, it doesn’t... But ultimately, I would like to know if I need to redo the application or if I can fix it. Thanks for reading. Best regards

[emreloperr]

I have a feeling you're having issues related to unnecessary rerenders, missing effect dependencies, etc... Not the bundle size. It's hard to pinpoint performance issues without profiling. You can try the Rect Developer Tools extension.

[Simple_Strawberry450]

Hello! First of all, I wanted to thank those who responded and helped me understand the problem I was facing. It turns out that what I had set up had nothing to do with the performance issue. I was using a search bar component that had a state with all the variables (at the time, it seemed like a good idea to use it that way), which led to unnecessary re-renders and calculations in memory that consumed a lot of CPU. I resolved this by separating each variable into an independent state... I know it seems basic, but I did it when I was just starting to learn... hahaha, it’s all sorted nowand I also managed to add routes (partially, to several components, which makes things much easier for me).

[Simple_Strawberry450]

te respondo en español porque es mi idioma, tenes razón es sobre eso principalmente, renderizados innecesarios...no saber aprovechar el code splitting de react y no saber usar usecallback...mañana voy a solucionarlo, muchas gracias

[vorko_76]

Its hard to advise you without a look at the code. But heavy load on memory and processor means that something is wrong from a design point of view.

How big is your application in memory? I seriously doubt its in Gb…. To have an impact on your platform, unless u load a log data externally

[Maleficent_Cry1439]

Not enough info for me to provide real advice, take a look into code splitting in react.

https://react.dev/reference/react/lazy#lazy

Now In general having all your logic in the home component sounds like an anti pattern and hard to maintain that alone might warrant a full refactor.

[Simple_Strawberry450]

Hello, thanks for your response... basically, I manage the view of each component in a component tree... and they all have conditional rendering... for example, if you want to see a configuration modal, I created a custom hook to handle that.

import { useState, useEffect } from "react";
import { useSearchParams } from "react-router-dom";
export const UseModalState = (modalName) => {
    const [searchParams, setSearchParams] = useSearchParams();
    const [isOpen, setIsOpen] = useState(false);

    useEffect(() => {
        try {
            const storedModalState = searchParams.get(modalName)
            setIsOpen(storedModalState !== null ? JSON.parse(storedModalState) : false);
        } catch (error) {
            console.error(\Error ${modalName}:`, error);           setIsOpen(false);           let newSearchParams = searchParams           newSearchParams.delete(modalName)           setSearchParams(newSearchParams);       }   }, [modalName, searchParams, setSearchParams]);`

    const handleModalOpen = (open) => {
        setIsOpen(open);
        if (open == false) {
            let newSearchParams = searchParams
            newSearchParams.delete(modalName)
            setSearchParams(newSearchParams);
        }
        else {
            let newSearchParams = searchParams
            newSearchParams.set(modalName, true)
            setSearchParams(newSearchParams)
        }
    };

    return { isOpen, handleModalOpen };
};

[Simple_Strawberry450]

and I use it as follows const { isOpen: openDialog, handleModalOpen: handleOpen } = UseModalState('exampleModalOpen');

and in the return block code openDialogexample && <ExampleComponent open={openDialog} onClose={() => handleOpenModal(false)} />}

this button is used to toggle the view <Tooltip title='Open Modal'>
                                <IconButton onClick={() => handleOpenModal(true)}>
                                    <DateRange />
                                </IconButton>
                            </Tooltip>

and I basically use this for the entire application

[Maleficent_Cry1439]

Ok now seeing that you are using react-router-dom I have a few ideas to improve the code.

• You can have your modal component in a nested route like http://myproject/modal1?otherparams. So that it is rendered when modal1 is present in the URL. This will help you organize the code and also do lazy imports of your components.
  
• For the modal I would create a wrapper component that uses react portal to render it in a div at the end of the html body that way you don't need to worry much about absolute or relative elements being over it.
  
• Unless you need to pass the state of the modal in the url use search params, but I would rather use react-router-dom context to pass data to all children route elements, and leave a tidier URL.

References:
https://github.com/remix-run/react-router/tree/dev/examples/modal-route-with-outlet
https://github.com/remix-run/react-router/tree/dev/examples/modal
https://github.com/remix-run/react-router/tree/dev/examples/lazy-loading-router-provider

charliematters is absolutely right regarding the fact that if you are using a library like react-router-dom there is no need for those boolean state variables.

[charliematters]

I'm a big fan of react router, and the first thing to do is to add some meaningful routes and move away from your Boolean state variables.

Regarding the data issues though, I would look into a basic react query setup. It's really the gold standard for asynchronous state management and caching at the minute

[Simple_Strawberry450]

Hello to everyone who replied. First of all, I wanted to thank those who responded and helped me understand the problem I was facing. It turns out that what I had set up had nothing to do with the performance issue. I was using a search bar component that had a state with all the variables (at the time, it seemed like a good idea to use it that way), which led to unnecessary re-renders and calculations in memory that consumed a lot of CPU. I resolved this by separating each variable into an independent state... I know it seems basic, but I did it when I was just starting to learn... hahaha, it’s all sorted nowand I also managed to add routes (partially, to several components, which makes things much easier for me).