Tengo un componente principal con un componente modal secundario. el componente padre tiene una variable de estado en blanco que se pasa al hijo. el componente principal también tiene un div que necesita que se inicialice editorState en el procesamiento para que funcione correctamente. Mi componente secundario tiene un botón que establece stateForDiv con algunos datos para representar en componentes principales div. Necesito el componente principal para configurar el estado del editor cuando el niño actualiza stateForDiv. Naturalmente, traté de usar useEffect con stateForDiv como dependencia. Bueno, cuando useEffect se ejecuta, crea un bucle infinito cuando ejecuto setEditorState. ¿Cómo puedo configurar EditorState cada vez que cambia stateForDiv sin crear un bucle infinito?

 import React, {useState, useEffect} from 'react'; import {convertFromRaw, EditorState } from 'draft-js'; import ChildComponent from './ChildComponent'; const ParentComponent = () => { const [ editorState, setEditorState ] = useState(() => { return EditorState.createEmpty()}) // this must be initialized once on render const [ stateForDiv, setStateForDiv ] = useState() // this state is passed down to child component, when the child component updates this state, we need to setEditorState.. this is my problem, infinite loop in useEffect when using stateForDiv as dependency useEffect(() => { if(stateForDiv) { setEditorState(EditorState.createWithContent( convertFromRaw(stateForDiv))); } else { console.log("false") } }, [stateForDiv]) return ( <div currentContent={editorState} onChange={setEditorState} > </div> <div> <Modal> <ChildComponent setStateForDiv={setStateForDiv} </Modal> </div>

Componente secundario que está configurando el estado de stateForDiv

 const ChildComponent = ({setStateForDiv}) => { return ( <div> <button onClick={() => {setStateForDiv("<p>hi there</p>")} } ></button> </div> ) }