Me gustaría evitar que los componentes se vuelvan a renderizar con React. He leído algunas guías, pero todavía tengo problemas para que mi código funcione. El componente CreateItem crea un formulario de entrada a partir del objeto json. Cuando los estados de entrada cambian, React vuelve a renderizar todos los componentes. Evitaría esta situación ya que causa algunos problemas.

He usado React.memo pero mi código aún no funciona. ¿Es esta una buena manera de implementar este código? ¿Cómo puedo corregir mi código? Gracias

 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> ); });

--- EDITAR ---

CreateItem usa la función CreateCheckBoxComponent para crear mi casilla de verificación personalizada con el estado predeterminado del valor json. El código CreateCheckBoxComponent es el siguiente:

 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 funciona bien y cambia de estado, pero cuando hago clic en la casilla de verificación para cambiar el indicador, CreateCheckBoxComponent se vuelve a renderizar y establece el estado predeterminado nuevamente. Me gustaría evitar este problema y creo que evitar volver a renderizar puede ser una solución.