Estoy desarrollando una aplicación web similar a una consola. Cuando el usuario ingresa algo, se agrega un componente en un elemento childrens que es un apoyo de un componente <ConsoleOutput> ; por ejemplo, cuando el usuario ingresa 'lista de salas de chat', se crea un componente <ChatroomList> :

 const [childrens, setChildrens] = useState([]); /* Switch that analizes input */ case 'chatrooms list': setChildrens(childrens => { return ( [...childrens, <ChatroomList chatrooms={chatrooms} />] ); }); break;

Entonces en la aplicación devuelvo esto:

 return ( <div className='container-fluid'> <Header /> <ConsoleOutput childrens={childrens} /> <CommandInput onSubmit={processCommand} /> </div> );

Esto está funcionando muy bien, los componentes se agregan correctamente en la entrada y se reflejan en la pantalla (se vuelve a renderizar en el cambio); la cuestión es que estos childrens no se vuelven a renderizar con el cambio, por ejemplo, <ChatroomList> que toma un accesorio de chatrooms de chat.

Este accesorio se actualiza constantemente con un gancho useEffect:

 useEffect(() => { const getChatrooms = async () => { const response = await fetchChatrooms(); if (response.success) { const serverChatrooms = response.chatrooms; setChatrooms(serverChatrooms); } } getChatrooms(); }, [chatrooms]);

Entonces, si el usuario ingresa la chatrooms list , este componente <ChatroomList> se crea y se muestra en la pantalla, pero si la propiedad de las chatrooms de chat cambia, tengo que crear nuevamente el componente o volver a cargar la página para ver los cambios.

Sospecho que esto se debe a que este componente es un componente secundario de <ConsoleOutput> , pero no estoy seguro.