Tengo un componente que reutilizo la mayor parte de su lógica. Estoy buscando evitar volver a renderizar en sus componentes secundarios que suceden cada vez que paso el mouse sobre el elemento principal:
const ReusableComponent = ({ conditional }) => { const [isHovered, setIsHovered] = useState(false); const AnotherReusableComponent = ({ children }) => ( <div>{children}</div> ); const renderComponent = () => { if (conditional) { return <ComponentA />; }; return <ComponentB />; }; return ( <div> <title onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} > Menu </title> <div className={isHovered ? 'oneClass' : 'otherClass'}> <AnotherReusableComponent> {renderComponent()} </AnotherReusableComponent> </div> </div> ); }Notas:
ComponentA y ComponentB se muestran/ocultan dependiendo de classNameonHover cambia classNamememo probado, no funcionó.onHover<AnotherReusableComponent> y sus elementos secundarios cuando cambie isHovered , por lo tanto, debe envolverlo en React.memo() para asegurarse de que no se vuelva a procesar a menos que cambien sus accesorios: const AnotherReusableComponent = React.memo(({ children }) => ( <div>{children}</div> )); const ComponentA = React.memo(() => ( <div>A</div> )); const ComponentB = React.memo(() => ( <div>B</div> )); const ReusableComponent = ({ condition }) => { const [isHovered, setIsHovered] = useState(false); return ( <div> <title onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} > Menu </title> <div className={isHovered ? 'oneClass' : 'otherClass'}> <AnotherReusableComponent> {condition ? <ComponentA/> : <ComponentB/>} </AnotherReusableComponent> </div> </div> ); } Esto debería evitar la nueva representación de AnotherReusableComponent y sus elementos secundarios a menos que cambie la condición .