Sé que puede decirle a React que omita un efecto al pasar una matriz como segundo argumento opcional.
Por ejemplo:
useEffect(() => { document.title = `You clicked ${count} times`; }, [count]); // Only re-run the effect if count changesPero, ¿y si quiero controlar la comparación? para agregar mi propia lógica de comparación.
Esperaría algo como React.memo que pueda pasar una función como segundo argumento.
En un comentario anterior , Gabriele Petrioli enlaza con la documentación de React.memo que explica cómo implementar shouldComponentUpdate. Estaba buscando en Google combinaciones de shouldComponentUpdate + useEffect + "react hooks", y esto surgió como resultado. Entonces, después de resolver mi problema con la documentación vinculada, pensé en traer la información aquí también.
Esta es la forma antigua de implementar shouldComponentUpdate:
class MyComponent extends React.Component{ shouldComponentUpdate(nextProps){ return nextProps.value !== this.props.value; } render(){ return ( <div>{"My Component " + this.props.value}</div> ); } }La nueva forma de React Hooks:
React.memo(function MyComponent (props) { return <div>{ "My Component " + props.value }</div>; })Sé que probablemente estaba pidiendo más en su pregunta, pero para cualquiera que venga de Google y busque cómo implementar shouldComponentUpdate usando React Hooks, ahí tiene.
La documentación está aquí: how-do-i-implement-shouldcomponentupdate
Agregando a la respuesta de PAT-O-MATION,
React.memo también acepta un segundo parámetro, que es una función que se puede usar para determinar si un componente debe renderizarse o no.
si la función devuelve verdadero, entonces el componente no se volverá a representar al cambiar esa propiedad, por el contrario, se actualiza cuando el valor de retorno es falso
function SomeComp({prop1, prop2}) { return( .. ) } React.memo(SomeComp, (props, nextProps)=> { if(props.prop1 === nextProps.prop1) { // don't re-render/update return true } })Nota: el componente solo se volvería a procesar cuando la función de devolución de llamada devolviera falso, por lo que en el caso anterior, incluso si el valor de prop2 cambia, no se volverá a procesar
Además de la respuesta de Avinash . Nota importante para devolver valores:
shouldComponentUpdate() { // returns true by default // return false if you don't need re-render } export default React.memo(Component, (props, nextProps) => { if(props.prop1 === nextProps.prop1) { // return true if you don't need re-render } })