He leído algunos artículos sobre cuándo optimizar el renderizado en React, sin embargo, todavía tengo algunas dudas.
const RepairNoticeContainer = () => { const dispatch = useDispatch(); const history = useHistory(); const { siteType, siteId } = useParams(); const data = useSelector(pageSelectors.getData); const showRepairNotice = data.grid.cols.lg !== 36; const handleRepairClick = () => { dispatch( pagesActions.copyAndRepairCurrentPage(newPageId => { history.push(`/editor/${siteType}/${siteId}/pages/${newPageId}`); }) ); }; return showRepairNotice ? <RepairNotice onRepairClick={handleRepairClick} /> : null; }; Por lo que puedo entender, sería beneficioso usar useCallback para handleRepairClick para evitar la repetición de <RepairNotice/> . Pero, ¿qué pasa con la variable showRepairNotice ? ¿Debería estar envuelto en un useMemo para la optimización?
const RepairNotice = ({ onRepairClick }) => { const translate = useTranslator(); let message = translate("repair_warning"); message = message.charAt(0).toLowerCase() + message.slice(1); return ( <MessageBox type="warning" icon="information11" className="mb-0 mt-2"> <div className="row"> <div className="col"> <b>{translate("warning")}:</b> {message} </div> <div className="col-auto text-right"> <Button color="danger" onClick={onRepairClick} size="small"> {translate("repair_now")} </Button> </div> </div> </MessageBox> ); Una pregunta similar para este ejemplo. ¿Sería beneficioso envolver message dentro de useMemo ?
const Page = ({ status }) => { const unsavedData = status?.unsavedData ? true : false; return ( <Fade> <div className="Page"> <NavConfirmModal active={unsavedData} onSavePage={onSavePage} /> </div> </Fade> ); }; Por último, ¿debería usarse useMemo guardar unsavedData ?
Las explicaciones serían muy apreciadas.
Por lo que puedo entender, sería beneficioso usar useCallback para handleRepairClick para evitar repeticiones de
Así es. mientras envuelve handleRepairClick , simplemente hablará, evitará la creación de una nueva instancia de esta función, por lo que guardará el componente anidado RepairNotice de renderizaciones redundantes porque se basa en esta función en accesorios. Otro buen caso para useMemo es cuando está representando una lista de elementos y cada uno se basa en la misma función de controlador declarada en su padre. Muy buen useCallback Explicación de devolución de llamada aquí.
Pero, ¿qué pasa con la variable showRepairNotice? ¿Debería estar envuelto en un useMemo para la optimización?
Es solo una simple verificación de "ecuación" que es realmente económica desde el punto de vista del rendimiento, por lo que realmente no hay necesidad de useMemo aquí.
¿Sería beneficioso envolver el mensaje dentro de useMemo?
Sí lo haría. Dado que hay al menos 3 acciones, javascript tiene que activar el message ( charAt , toLowerCase , slice ) y realmente no desea que estos cálculos se activen cada vez que se vuelve a generar el componente RepairNotice .
¿Debería usarse useMemo sin guardar datos?
Puede ser preferible envolver unsavedData en useMemo si NavConfirmModal se envolverá en React.Memo o en el caso de "cálculos pesados". Entonces, para el caso actual, realmente no haría una diferencia. (por cierto, el cálculo de datos no unsavedData podría escribirse como !!status?.unsavedData para obtener booleanos) .