TechTalk 2o22 - State of React State Management

As a Front-end developer, one of the most crucial skills to possess is how to manage the state of your applications. The ability to synchronize application states with data changes and manage shared states amongst different components is a vital requirement in building modern front-end applications. Several state management libraries have been developed with certain frameworks that naturally work well with a de-facto state management library. In this lecture, you will learn all the most common state management alternatives.

Transcript

1. State of React state management
2. HypeTech Tech education and shaping ideas into hype products hypetech.io | reactweek.dev Marko Arsić Founder and CEO @ HypeTech Founder of HypeTech Education Senior Software Engineer @ adidas Lecturer @ ReactWeek.dev Independent Tech Consultant Helping companies set up teams and standardize the development process github.com/marsicdev
3. React v17.0 Oct 2020
4. No New Features Primarily focused on making it easier to upgrade React itself Easier to embed React into apps built with other technologies
5. React v18.0
6. Automatic Batching Starting with performance, we’ve got huge improvements to automatic batching.
7. Before React 18, React already batched (aka grouped) multiple state updates into one to reduce unnecessary re-renders.
8. Automatic Batching it happened only in DOM event handlers, so Promises, timeouts, or other handlers didn’t take advantage of that.
9. With v18, React will batch state updates no matter where they happen
10. State of React State Management
11. The state describes the condition of an application at a given point in time.
12. One of challenges in React application is the management of state
13. React alone is not sufficient to handle the state complexity
14. React components have a built-in state object. The state is encapsulated data where you store assets that are persistent between component renderings.
15. The state is just a fancy term for a JavaScript data structure.
16. If a user changes state by interacting with your application, the UI may look completely different afterwards, because it's represented by this new state.
17. Types of state
18. Persistent State - lives on the server and it is accessible, for example, via a REST endpoint
19. Navigation State - where is the user in the application? Is he on the sign-in page, the sign-up page or the profile page?
20. Local UI State - what is the colour of the button? Is the panel expanded or not? Is the modal open
21. Client State - filters selected by the user when dealing with a large list of items, the current page in the list of items, table sorting, pagination, infinite scroll
22. Context
23. Context is designed to share data that can be considered “global” for a tree of React components
24. For example Current authenticated user, theme, or preferred language
25. Context is primarily used when some data needs to be accessible by many components at different nesting levels
26. If you only want to avoid passing some props through many levels, component composition is often a simpler solution than context
27. Redux
29. RTK Query - Takes inspiration from other tools that have pioneered solutions for data fetching, like Apollo Client, React Query, Urql, and SWR, but adds a unique approach to its API design
30. • The data fetching and caching logic is built on top of Redux Toolkit • RTK Query's functionality can be used with any UI layer • RTK Query can also generate React hooks that encapsulate the entire data fetching process
31. React Query v3
33. Performant and powerful data synchronization for React
34. Fetch, cache and update data in your React and React Native applications all without touching any "global state".
35. It makes fetching, caching, synchronizing and updating server state in your React applications a breeze.
36. Good DevTools support
37. Apollo Client
38. With Apollo's declarative approach to data fetching, all of the logic for retrieving your data, tracking loading and error states, and updating your UI is encapsulated by the useQuery Hook.
39. This encapsulation makes integrating query results into your presentational components a breeze!
40. Good DevTools support
41. SWR
42. The name “SWR” is derived from stale-while-revalidate, a HTTP cache invalidation strategy
43. SWR is a strategy to first return the data from cache (stale), then send the fetch request (revalidate), and finally come with the up-to-date data.
44. Other tools
46. Decision-making process
48. Simplify Your State
49. 1. Identify the type of state 2. Keep your state data as close as possible benefits: maintainability and performance. 3. Don't keep your entire state globally benefits: increased complexity, hard to maintain
50. Summary
51. As the application is starting to grow, so does the complexity of managing the state.
52. the state management strategy is not something that you want to add late in your project
53. you should plan for it because it can be the decisive factor for the success or failure of your application
54. “If you fail to plan, you are planning to fail! ” - Benjamin Franklin
55. Q & A As everything good in life, knowledge is great only when shared https://discord.gg/94uhCAkFKf
56. As everything good in life, knowledge is great only when shared hypetech.io/education
57. contact@reactweek.dev