Estoy tratando de entender la diferencia exacta en términos de cómo se produce la nueva representación del componente de función en un caso usando setState simple V/s otro caso que usa actualización de estado funcional
El fragmento de código relevante es el siguiente
Caso 1: Provoca una nueva renderización del componente
const onRemove = useCallback( tickerToRemove => { setWatchlist(watchlist.filter(ticker => ticker !== tickerToRemove)); }, [watchlist] );Caso 2: No causa volver a renderizar
const onRemove = useCallback(tickerToRemove => { setWatchlist(watchlist => watchlist.filter(ticker => ticker !== tickerToRemove) ); }, []);Se puede ver un ejemplo completo de ambos casos de uso en;
https://codesandbox.io/s/06c-usecallback-final-no-rerenders-bsm64?file=/src/watchlistComponent.js
https://codesandbox.io/s/06b-usecallback-usememo-ngwev?file=/src/watchlistComponent.js:961-970
ACTUALIZAR
Enlace al artículo completo https://medium.com/@guptagaruda/react-hooks-understanding-component-re-renders-9708ddee9928#204b
Estoy un poco confundido en cuanto a cómo se evita la re-renderización de componentes secundarios.
en el articulo dice
"Afortunadamente, la función setter de useState hook admite una variante funcional que viene a nuestro rescate. En lugar de llamar a setWatchlist con la matriz de lista de vigilancia actualizada, podemos enviar una función que obtiene el estado actual como argumento".
Sin embargo, estoy un poco confundido si se evita la re-renderización de los componentes secundarios porque usamos una matriz vacía (ya que [] no cambia entre renderizaciones) ¿V/s se previene debido al uso de la variante setter de useState hook?
Usar una actualización de estado funcional o no es bastante irrelevante para la pregunta que está haciendo. Parece estar preguntando por qué (1) una devolución de llamada con dependencia desencadena una nueva representación versus (2) una devolución de llamada con dependencia vacía.
La respuesta es literalmente muy simple. En la versión (2), está proporcionando una referencia de devolución de llamada estable desde el momento en que se monta el componente que nunca cambia , mientras que en (1) la referencia de devolución de llamada cambia cuando lo hace la dependencia . Recuerde que los componentes de React se vuelven a renderizar cuando se actualizan el estado o los accesorios ( una nueva referencia de devolución de llamada es una nueva referencia de accesorio ) o cuando se vuelve a renderizar el componente principal. Dado que onRemove prop se está actualizando en (1), activa una nueva representación.