Tengo un problema con la nota de reacción cuando uso nextjs. En la _app, por ejemplo, tengo un botón importado:
import { ChildComponent } from './ChildComponent'; export const Button = ({ classN }: { classN?: string }) => { const [counter, setCounter] = useState(1); const Parent = () => { <button onClick={() => setCounter(counter + 1)}>Click me</button> } return ( <div> {counter} <Parent /> <ChildComponent /> </div> ); };Componente hijo:
import React from 'react'; export const ChildComponent = React.memo( () => { React.useEffect(() => { console.log('rerender child component'); }, []); return <p>Prevent rerender</p>; }, () => false );Hice uno trabajando en React y no pude resolverlo en mi propia aplicación: https://codesandbox.io/s/objective-goldwasser-83vb4?file=/src/ChildComponent.js
El segundo argumento de React.memo() debe ser una función que devuelva true si el componente no necesita volver a renderizarse y false de lo contrario, o en la definición original , si los accesorios antiguos y los accesorios nuevos son iguales o no .
Entonces, en su código, la solución debería ser simplemente cambiar el segundo argumento a:
export const ChildComponent = React.memo( () => { ... }, // this () => true );Lo que le dirá a React que "los accesorios no cambiaron y, por lo tanto, no es necesario volver a renderizar este componente".
Entonces, mi problema fue que hice una función llamada Botón y regresé dentro de un botón o Enlace. Así que tenía un mouseEnter dentro del botón que actualizaría el estado y manejaría la función fuera de la función. un poco vergonzoso Esto lo arregló. Entonces, el único cambio fue que moví usestate y handlemousehover dentro de la función de botón.
const Button = () => { const [hover, setHover] = useState(false); const handleMouseHover = (e: React.MouseEvent<HTMLElement>) => { if (e.type === 'mouseenter') { setHover(true); } else if (e.type === 'mouseleave') setHover(false); }; return ( <StyledPrimaryButton onMouseEnter={(e) => handleMouseHover(e)} onMouseLeave={(e) => handleMouseHover(e)} > <StyledTypography tag="span" size="typo-20" > {title} </StyledTypography> <ChildComponent /> </StyledPrimaryButton> ); };