防止使用 React 和 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 but the parent re-renders the children will render also.

2. React.memo prevents re-rendering if the component's state changes. but if the prop changes, the component 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