Gestión eficiente del estado con Hookstate

Rate this content
Bookmark

Si has trabajado con el gancho useState de React antes, es posible que te hayas preguntado por qué la gestión del estado global no puede ser igual de fácil. ¿Por qué todavía necesitamos tanto código repetitivo para gestionar el estado con la API de Contexto? ¿Y si no queremos estar limitados a herramientas con opiniones como Redux Toolkit o ser obligados a usar acciones y reductores en nuestras aplicaciones de React? Aquí es donde entra en juego Hookstate. Hookstate no es solo otra solución de gestión del estado. Además de ser rica en funciones, rápida y flexible, la biblioteca lleva la idea de simplificar la gestión del estado en las aplicaciones de React a un nivel completamente nuevo. En esta charla, presentaré Hookstate como una solución simple y eficiente de gestión del estado para aplicaciones de React.

10 min
25 Oct, 2021

Video Summary and Transcription

Esta charla presenta el estado de gancho como una solución flexible y simple de gestión del estado para React. Demuestra cómo se puede utilizar el estado de gancho para la gestión del estado global, así como para la gestión del estado dentro de componentes individuales. El orador destaca la facilidad de uso del estado de gancho para tareas como agregar, actualizar y eliminar tareas. La conclusión anima a explorar más el estado de gancho para una gestión eficiente del estado en aplicaciones de React.

Available in English

1. Introducción a Hook State

Short description:

Hola a todos. Mi nombre es Ebenezer Dawn, defensor en JetBrains para Webster MITE. Quiero hablar sobre la gestión eficiente del estado con hook state. Hook state es una solución de gestión de estado para React. Es flexible y lleva la simplicidad a otro nivel. Usaré esta aplicación para demostrar hook states. Tenemos dos componentes para esta aplicación, uno para tareas no completadas y otro para tareas completadas. Comparten el mismo estado utilizando hook state para la gestión del estado. La gestión del estado global con hook state es fácil en comparación con otras herramientas como Redux o la API de contexto de React.

lleva la simplicidad a otro nivel. Así que quiero usar esta aplicación para demostrar hook states. Sé que, sé que hacer operaciones es la única forma en que puedo mostrarte cómo crear, leer, actualizar y eliminar de la forma más sencilla en lugar de mostrarte eso con una herramienta de gestión de estado como hook state, por ejemplo. Así que justo en nuestro trabajo podemos completar tareas, eso es actualizar la tarea. También podemos eliminarla y podemos agregar nuevas tareas. Así que hagamos cosas. Y he decidido usar dos componentes diferentes para esta aplicación. Tenemos el componente de tareas pendientes que representa las tareas no completadas, ese es un componente, tenemos otro componente para las tareas completadas. Y estos dos componentes comparten el mismo estado, utilizando hook state para la gestión del estado. Ahora, si volvemos a ID en este momento, estoy en una base de código inicial, lo que significa que aún no estoy usando hook state. Esta tenemos un archivo starter js y luego tenemos tareas dentro de él. ¿Y si la gestión del estado global fuera tan fácil como esto? ¿Y si esto es todo lo que necesitamos hacer para gestionar el estado global, solo tenemos una variable y su nombre es tareas, o cualquier estado que queramos. Y lo exportamos, luego volvemos a diferentes componentes. Y todo lo que tenemos que hacer es importarlo y usarlo. Lo mismo con el componente de tareas no completadas. Esto no es un estado fijo, solo estamos usando variables de JavaScript para exportar e importar. Probablemente hayas usado Redux antes, o la API de contexto de React, o RxJS y todo lo demás. La gestión del estado funciona, es realmente eficiente, la gestión del estado con estas herramientas. Pero es complejo. Es realmente complejo. Y quiero que sea tan fácil como esto. Quería que si quiero agregar una nueva tarea, solo tenga un método como tenemos en la línea 10, como tasks.push. Y luego tengo mi nueva tarea, en lugar de usar rebanadas adicionales, reductores, acciones y todo lo demás o el operador de propagación teniendo un estado anterior y luego el siguiente estado.

2. Usando HookState para la Gestión del Estado Global

Short description:

¿Puedo simplemente hacer tasks.push y tener mi nueva tarea? Por eso amo HookState. Ahora volvamos a la rama principal donde tengo la implementación de HookState. Esta es una aplicación construida con HookState. Y en el archivo store.js, así es como estamos usando HookState para crear un estado global. Tenemos store y eso es igual al método createState de add HookState/core. Así que quieres instalar hookstate, eso es npm install/core, o yarn add HookState/core. Y por qué tenemos /core en este momento es porque HookState, recuerda que dije que es muy extensible.

y todo eso. ¿Puedo simplemente hacer tasks.push y tener mi nueva tarea? Por eso amo HookState. Ahora volvamos a la rama principal donde tengo, debería ser esto, donde tengo la implementación de HookState. Esta es una aplicación construida con HookState. Y en el archivo store.js, así es como estamos usando HookState para crear un estado global.

Tenemos store y eso es igual al método createState de add HookState/core. Así que quieres instalar hookstate, eso es npm install/core, o yarn add HookState/core. Y por qué tenemos /core en este momento es porque HookState, recuerda que dije que es muy extensible. Así que también tenemos hookstate/persistence, que nos ayuda a persistir estados en el almacenamiento local del navegador. ¿Qué tan genial es eso? Pero lo que necesitamos ahora es HookState/core. Y el método createState de HookState/core. Esto es todo lo que tenemos que hacer para crear un estado global. Y tenemos tasks dentro del objeto para los métodos de createState. Así que por qué uso un objeto es porque en realidad quiero agregar otras cosas, digamos esto es un almacén global. Y quiero agregar otras cosas como algo más. Y este es mi nuevo estado en este momento, este es mi nuevo estado que puedo, cualquier método, HookState hace disponible para store, que contiene todos los demás estados, también está disponible para tasks y para algo más. Así que si vamos al archivo Apple GS, estamos agregando una nueva tarea y en la línea 12. Es así de simple. Así que no les dije chicos, tenemos tasks.merge y una nueva tarea. Eso es todo por ahora en la línea siete, estamos usando el gancho useStates de HookState para obtener el valor de tasks. Así que queremos usar tasks desde un almacén global, tenemos const y luego destructuramos directamente podemos decidir decir que esto es constate es igual a use stage y luego destruir la importación de ./store y luego decidimos hacer store.tasks. Sí, pero lo que decidimos hacer es destructurarlo realmente y luego aquí tenemos tasks y podemos usar eso. Ahora en HookState para obtener el valor de un estado, necesitamos el método get. Así que aquí tenemos el valor de entrada que obtiene y obtiene el valor de este estado local y crea en la línea ocho, podemos crear estados globales, podemos crear estados locales y crear el estado para el valor de entrada. Y simplemente hago eso directamente con el gancho useStates. No necesito el método createState para esto. Quería que fuera un estado global. Uso el método createState. Uso el gancho useDate y luego tengo mi estado local y el valor de entrada que obtiene el valor de mi estado local. Y puedes ver aquí en la línea 27, donde estoy

3. Usando HookState para la Gestión del Estado

Short description:

Y estoy usando el valor de entrada para establecer. Y tenemos el componente completado y no completamente un componente. Ambos usan store. Estamos trabajando con dos componentes diferentes y usando eso para acceder a un store. Para eliminar una tarea, usamos el valor no de hook state/core. Esto es cómo uso hook state para acceder a un store, obtener todas las tareas, filtrar las tareas completadas, actualizar las tareas usando el método set, y eliminar las tareas usando el valor no de hook state/core.

estableciendo el valor del valor de entrada para que sea lo que sea que use ese tipo dentro del campo de entrada. Y estoy usando el valor de entrada para establecer. Eso es todo lo que tengo que hacer. Y tenemos el componente completado y no completamente un componente. Ambos usan store. Y todo lo que tenemos que hacer es importar store desde ../store, que es el archivo store.js. Y en la línea cinco, tenemos tasks desde store. Y luego, para las tareas completadas, lo que estamos haciendo en este caso es usar tasks para obtener todas las tareas y luego usar el método filter para obtener solo las tareas completadas. Probablemente haya una forma más sencilla de hacer esto. Pero quiero mostrarte cómo trabajar. Estoy trabajando con dos componentes diferentes y usando eso para acceder a un store. Y para eliminar una tarea, estamos usando hook state para eliminar la tarea, usando el método splice de tasks para obtener la tarea que queremos eliminar. Así es como obtenemos el índice de la tarea en la línea nueve, tenemos tasks.indexOf(task). Esto es un método de JavaScript. Entonces, indexOf(task). Y esta es la tarea que vamos a obtener del argumento de la función removeTask cuando la llamamos aquí en la línea 21. Entonces, removeTask y tasks. Esta es una tarea en particular que cuando la eliminamos obtenemos su índice, usamos el método splice de tasks para establecer el valor de esa tarea en ninguno, así es como eliminamos algo en hook state, usamos el valor no de hook state/core. Entonces llamamos al método set y su argumento es ninguno. Si quieres establecer esto en algo más, digamos, hey, este será el nuevo valor de esa tarea en particular, queremos eliminar la tarea, y tenemos ninguno. Y eso es todo. Así es como uso hook state para acceder a un store, obtenemos todas las tareas. Y luego usamos el método get para obtener el valor de la tarea. Ahora estamos filtrando para obtener las tareas completadas. Para actualizar una tarea, tenemos el método set, y luego ese será el nuevo valor. Ahora, para eliminar una tarea, tenemos el valor no de hook state/core. Y eso es lo que vamos a hacer para usar hook state para la gestión del estado. Tengo un tutorial más largo sobre hook state en mi canal de YouTube. Así que sí, puedes echarle un vistazo si quieres ver más sobre hook state, si quieres algo más.

4. Conclusion and Next Steps

Short description:

Echa un vistazo a mi canal de YouTube para obtener más tutoriales sobre la gestión del estado en React. Encuentra artículos que he escrito en mi perfil de GitHub. Demostrando el estado para una gestión eficiente del estado en aplicaciones de React. Echa un vistazo a hook state, es rápido, eficiente y funciona bien.

Para obtener más información, tengo un tutorial más extenso. También tengo un artículo sobre el tema en hook state. Así que hazme un favor y echa un vistazo a mi canal de YouTube. Tengo otros tutoriales sobre la gestión del estado en React. Y también búscame en LinkedIn, GitHub y Twitter, encontrarás los diversos artículos que he escrito en mi perfil de GitHub. Entonces, ve a github.com/evidence. Tengo un enlace allí a todos mis artículos.

Ha sido agradable. Y eso es todo, demostrando el estado para una gestión eficiente del estado en aplicaciones de React. Por favor, echa un vistazo a hook state. Es un trabajo realmente bueno que está haciendo el equipo detrás de él, es rápido, eficiente, lo he usado y funciona. Ha funcionado bien para mí. Bien, eso es todo, nos vemos la próxima vez. Adiós.

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

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
When we think about Vuex, Pinia, or stores in general we often think about state management and the Flux patterns but not only do stores not always follow the Flux pattern, there is so much more about stores that make them worth using! Plugins, Devtools, server-side rendering, TypeScript integrations... Let's dive into everything beyond state management with Pinia with practical examples about plugins and Devtools to get the most out of your stores.
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured WorkshopFree
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn