Log in
React Conferences
React Summit US 2025React Summit US 2025
ES

Deep Dive on React Hooks Architecture

Daniel Espino García
Daniel Espino García
Mattermost
Video thumbnail
This video will go public in 29 days
Multipass and Full ticket holders have instant access to event recordings.
Please login if you have one.
Get Multipass

Register a free account to unlock access to this video in 14 days.

Bookmark
Rate this content

¿Alguna vez te has preguntado cómo funcionan los hooks de React internamente? Hay mucha magia en juego, como funciones que pueden almacenar estado. ¿Cómo es eso posible?

Únete a mí y hagamos una rápida inmersión en cómo funcionan los hooks de React internamente.

This talk has been presented at React Summit US 2025, check out the latest edition of this React Conference.

react hooks
Daniel Espino García
Daniel Espino García
25 min
21 Nov, 2025

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Introducción a los Hooks de React y Arquitectura con información sobre Mattermos, componentes de React y sintaxis JSX. Comprensión de React.createElement, componentes de React y createRoot para el renderizado del DOM. Exploración del proceso de renderizado de React y el papel del scheduler en la gestión de unidades de trabajo de componentes. Exploración de la creación del árbol de fibras de React y el mecanismo de hooks para la gestión del estado. Exploración de los mecanismos de montaje y actualización del árbol de fibras de React con la orquestación de variables globales. Exploración del uso de variables globales para la optimización del rendimiento y el proceso de actualización de callbacks en el árbol de fibras de React. Exploración de las reglas de hooks y diferentes mecanismos de hooks como useRef y useEffect en React. Efectos en la fibra de React, complejidad de useState, mecanismos de actualización y consideraciones de costo. Consideraciones de almacenamiento de memoria para hooks, impacto en la CPU y optimización de estilos. Información sobre el almacenamiento de props en React Fiber y comparaciones de estilo. Resumen de los temas cubiertos y reconocimiento de detalles adicionales para futura exploración.
Available in English: Deep Dive on React Hooks Architecture
Video transcription and chapters available for users with access.
Available in other languages:

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

No puedes usar Hooks condicionalmente... ¿o sí puedes?
React Summit 2023React Summit 2023
28 min
No puedes usar Hooks condicionalmente... ¿o sí puedes?
Top Content
Charlotte Isambert
Charlotte Isambert
Bam.tech
The Talk discusses the use of the Use hook in React and its ability to be used conditionally. It explains the concept of the fiber tree and how hooks values are stored in memory. The Talk also delves into the conditional use of useContext and how it differs from useState. It explores the process of updating context values and optimizing context rendering. The role of the provider in managing context values and rendering is emphasized.
react hooksreactreact conditional hooks
Gestión eficiente del estado con Hookstate
React Advanced 2021React Advanced 2021
10 min
Gestión eficiente del estado con Hookstate
Ebenezer Don
Ebenezer Don
Author of Simplified JavaScript for VIPs & Git Prodigy
This Talk introduces hook state as a flexible and simple state management solution for React. It demonstrates how hook state can be used for global state management, as well as for managing state within individual components. The speaker highlights the ease of using hook state for tasks such as adding, updating, and removing tasks. The conclusion encourages further exploration of hook state for efficient state management in React applications.
react hooksreactstate management
No olvides React Memo
React Summit 2022React Summit 2022
7 min
No olvides React Memo
Khrystyna Landvytovych
Khrystyna Landvytovych
Frontend engineer @ SoftServe
The Talk covers topics such as React memo compiler, use memo and use callback, building custom hooks, and the benefits of using use ref. It also explores the similarities between use memo and use ref, and the use of React Memo for preventing re-renders and optimizing expensive calculations. The speaker also shares personal information and contact details.
react hooksreactreact memoreact forgetbest practices
No sabemos cómo funcionan los React State Hooks
React Summit Remote Edition 2021React Summit Remote Edition 2021
7 min
No sabemos cómo funcionan los React State Hooks
Adam Klein
Adam Klein
Covver
This Talk provides an introduction to React Staytools, explaining how to use the state and setState function to update a counter. It also delves into the inner workings of React rendering, discussing the update queue and re-rendering conditions. The Talk concludes by mentioning the different modes of updating and triggering re-renders in React, and encourages further exploration of the source code and discussion in Discord.
advancedreact hooksreact
No sabemos cómo funcionan los React State Hooks
React Advanced 2021React Advanced 2021
28 min
No sabemos cómo funcionan los React State Hooks
Adam Klein
Adam Klein
Covver
This talk explores how useState works under the hood and why it's important to understand. It addresses the common confusion around the callback to setState and provides insights gained from exploring React hooks source code. Knowing how useState works is important for learning patterns, debugging, and gaining confidence in our code. React manages the current value of hooks in a linked list and performs updates sequentially. React optimizes rendering by caching computations and performing shallow renders when the state doesn't change.
advancedreact hooksreact
El Arte de Ignorar las Mejores Prácticas para el Rendimiento de React
React Summit 2024React Summit 2024
19 min
El Arte de Ignorar las Mejores Prácticas para el Rendimiento de React
Tiger Oakes
Tiger Oakes
Senior engineer at Microsoft
This Talk introduces the concept of being a 'React bad boy' by ignoring best practices and optimizing React rendering. It explains how to avoid unnecessary rerenders using React.memo and React DevTools. It also covers advanced techniques like isolating state changes and lazy loading hooks. The Talk explores reducing component rerenders using Svelte stores and optimizing with swap stores in Redux. These techniques improve React performance without the need for major refactors or rewrites.
performancereact hooksreact

Workshops on related topic

Consejos sobre React Hooks que solo los profesionales conocen
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
Consejos sobre React Hooks que solo los profesionales conocen
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
La adición de la API de hooks a React fue un cambio bastante importante. Antes de los hooks, la mayoría de los componentos tenían que ser basados en clases. Ahora, con los hooks, estos son a menudo componentes funcionales mucho más simples. Los hooks pueden ser realmente simples de usar. Casi engañosamente simples. Porque todavía hay muchas formas en las que puedes equivocarte con los hooks. Y a menudo resulta que hay muchas formas en las que puedes mejorar tus componentes con una mejor comprensión de cómo se puede usar cada hook de React.Aprenderás todo sobre los pros y los contras de los diversos hooks. Aprenderás cuándo usar useState() versus useReducer(). Veremos cómo usar useContext() de manera eficiente. Verás cuándo usar useLayoutEffect() y cuándo useEffect() es mejor.
react hooksreactreact profilerreact 18 hooksdeep divebest practices
Gestión del estado en React con Context y Hooks
React Summit Remote Edition 2021React Summit Remote Edition 2021
71 min
Gestión del estado en React con Context y Hooks
Workshop
Roy Derks
Roy Derks
Mucho ha cambiado en el mundo de la gestión del estado en React en los últimos años. Donde Redux solía ser la principal biblioteca para esto, la introducción de las API de Contexto y Hooks de React ha revolucionado las cosas. Ya no necesitas bibliotecas externas para manejar tanto el estado del componente como el estado global en tus aplicaciones. En este masterclass aprenderás los diferentes enfoques para la gestión del estado en la era post-Redux de React, ¡todos basados en Hooks! Y como bonificación, exploraremos dos próximas bibliotecas de gestión del estado en el ecosistema de React.
react hooksreactstate management
Evolución de la Gestión de Formularios en React
React Summit US 2024React Summit US 2024
72 min
Evolución de la Gestión de Formularios en React
Workshop
Adrian Hajdin
Adrian Hajdin
Aprende cómo manejar formularios en React utilizando las últimas características, como startTransition, useTransition, useOptimistic y useActionState, con y sin acciones del servidor de React 19, junto con la validación adecuada, manejo de errores y mejores prácticas.La masterclass comenzará demostrando el manejo tradicional de formularios usando useState y useEffect para el renderizado del lado del cliente. Gradualmente, pasaremos a utilizar las últimas características de React 19, incluyendo formularios del lado del servidor y los hooks más recientes para gestionar estados y errores de formularios. Al final de la masterclass, los participantes entenderán cómo crear formularios robustos con validación adecuada y manejo de errores.Objetivos de AprendizajeÚltimos Hooks de React 19 — useTransition, useFormStatus, useOptimistic, useActionState, useDeferredValueAcciones del ServidorRevalidacionesValidación del lado del ServidorManejo de ErroresPrácticas de Seguridad
react hooksreact 19