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..

Answer 1

React.memo only prevents own rerendering.

You have considered the following things.

1. 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).

2. 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