prevent re render component using React and React-memo

Question

I would like to prevent component re-rendering using React. I've read some guides but I'm still having trouble getting my code to work. The CreateItem component creates an input form from the json object. When the input states change, React re-renders all components. I would avoid this situation as it causes some problems.

I have used React.memo but my code still doesn't work. Is this a good way to implement this code? How can I correct my code? Thank you


function MyComponent() {
    
    return(
        <div className="row"> 
            {Array.from(new Map(Object.entries(json))).map((data) => (
                <CreateItem obj={data} />

            ))}

        </div>
    );
        
}



//function CreateDiv(props) {
const CreateDiv = React.memo((props) => {

    console.log("rendering ");

    return (
        <form name="myForm"  onSubmit= {formSubmit}>
            <div className="row">
                {Array.from(new Map(Object.entries(props.obj[1]))).map((data) => (
                <>
                {(() => { 
                     return(
                        <div className="col-sm-2">
                            <CreateItem obj={data[1]} />
                        </div>
                    )
                })()}
                </>
                ))}
            </div>
        </form>
    ); 
});

--- EDIT ---

CreateItem uses CreateCheckBoxComponent function to create my custom checkbox with default status from json value. CreateCheckBoxComponent code is follwing:



function CreateCheckBoxComponent(props) {

    if(parseInt(props.obj.defaultValue) === 5)
        setChecked(false);
    else
        setChecked(true);

    return(
        <FormCheck
                label={props.obj.simbolName} 
                name={props.obj.idVar}
                type="checkbox"
                checked={checked}
                onChange={handleCheckBoxChange}
                sm={10}
            />                 
    );

}

HandleCheckBoxChange works fine and changes state, but when I click on checkbox to change the flag, CreateCheckBoxComponent is re-render and it sets the default state again. I would like to avoid this problem and I think preventing re-rendering can be a solution..

first of all please provide a unique key to the element with in map function. — Mirza Umair, Jun 13 '22 at 13:11

Mirza Umair · Accepted Answer · 2023-05-10T12:24:37.263

2

React.memo only prevents own rerendering.

You have considered the following things.

If the children are using React.memo. when the parent re-renders the children will not render but if it renders you have to figure it out maybe the children's state is changing or sometimes the hooks used in the component can also render the component. (updated).
React.memo prevents re-rendering if the component's props change. but if the state changes, the component may re-renders.

Note: make sure when you render elements/Components with the map function or any iteration always provide a unique key to them.

For more information click here

edited May 10 '23 at 12:24

answered Jun 13 '22 at 13:23

Mirza Umair

349
1
16

Now it's clear why I can't prevent re-rendering. Now considering I would like to fix my checkbox, can preventing re-rendering be a solution? – init Jun 14 '22 at 09:36
sorry but there are some missing codes, where are you setting the checked state? where have you defined handleCheckBoxChange? could you please provide the complete code? So I may help you. – Mirza Umair Jun 14 '22 at 10:43
your first statement is not correct: The rule is If you don’t want a component to re-render when its parent renders, wrap it with memo. After that, the component indeed will only re-render when its props change. The rule conflicts with your statement where you said children will ALWAYS render when parent renders – benchpresser May 09 '23 at 22:08

prevent re render component using React and React-memo

1 Answers1