Después de leer la documentación y las buenas prácticas. Decidí levantar el estado en mi código para una página específica. Cuando hago esto, provoco que mi aplicación se retrase porque ahora, cada vez que actualizo un campo específico en un formulario, se activa para volver a procesar todos los demás campos de formularios junto con otros widgets.
Traté de usar memo en cada uno de mis componentes, pero aparentemente no tiene efecto y el renderizado se activa cada vez.
El problema es que el componente en la imagen está muy por debajo de 6 niveles en comparación con donde estoy declarando y actualizando el estado. Entonces, cuando quiero actualizar el valor de este componente específico, básicamente, establece el estado de toda mi página. 
useEffect hook sin dependencia, continuará representando su componente una y otra vez, por lo que si desea representar su componente una vez, use useEffect con una matriz vacía como dependencia como esta:
useEffect(()=>{ //code will run once after rendering },[]);y si desea volver a renderizar un componente en base a alguna condición, entonces puede usar useEffect con la dependencia, si ese valor de dependencia cambia, activará el componente para volver a renderizar. Por ejemplo:-
const [dependency,setDependency] = useState(); useEffect(()=>{ //when value of dependency will change, code will run and trigge render },[dependency])