Issue #14 – State management in React

Issue #14 – State management in React

Thato Nwamadi
April 5, 2023
Blog cover image

Issue #14 – State management in React

<1/> State Management

No matter the size of React applications, one of the issues that one faces is how to go about managing global state, whether that is even necessary. React is somewhat un-opinionated around this. As a result there has been quite a few third party libraries that solve the problems that come with global state management. It is important to note that it is often advised that managing state globally should be looked at as a last option. As we build applications we need to choose the right tools for the right job.
Redux got early adoption because it was using the Flux architecture, the parts that make up Flux applications being the dispatcher, the store, and views.

Flux is the application architecture that Facebook uses for building client-side web applications. It complements React’s composable view components by utilizing a unidirectional data flow. It’s more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code.

Redux often lends itself in a place where you know sure when exactly to use it. For small applications it feels like you might be overengineering, for bigger applications you find yourself with this big single store managing all the data which is often not ideal.

With React hooks, you can use a combination of the Context API and useReducer, and achieve some level of Redux. Context is not necessarily a state manager but, a way to pass down values without drilling down the props. So useReducer may provide a new value and Context API would pass it down to the components that need it.

There are a lot of tools to use for state management in React applications.
Here is a list of a couple that you might consider:

A small, fast and scalable bearbones state-management solution using simplified flux principles. Has a comfy api based on hooks, isn’t boilerplatey or opinionated.

Recoil lets you create a data-flow graph that flows from atoms (shared state) through selectors (pure functions) and down into your React components. Atoms are units of state that components can subscribe to. Selectors transform this state either synchronously or asynchronously.

Jotai takes a bottom-up approach to React state management with an atomic model inspired by Recoil. One can build state by combining atoms and renders are optimized based on atom dependency. This solves the extra re-render issue of React context and eliminates the need for the memoization technique.

<2/> Deeper Dives

https://changelog.com/jsparty/146

<3/> The Weekly Dev

There has been a lot of success stories lately with companies talking about how using gRPC has helped them with their usecase, and there are more tools being built that are building on top of gRPC, connect.build being one. It is important to look at gRPC in isolation and not as a REST alternative. gRPC is a modern take on RPC design model, with the use of Protocol Buffers and HTTP/2

It is a great tool for intracommunication of microservices, there is no wide browser support so the hence it is better for internal services. Your external API can be implemented with whichever one you prefer between REST or GraphQL. It has lightweight messages which are smaller in size in comparison to JSON messages. It is widely considered the go to for real time data streaming.

<4/> Inside the console

When working with enterprise applications of microservices architecture, debugging needs to be seemless. Microservices making use of third-party APIs makes debugging a nightmare. Resolving whether the origin of the issue comes from the third-party API or one of the pre-existing APIs becomes a problem.
AWS X-Ray is a tool that collects data about the requests your application makes and provides tools that help you gain insight to resolve issues or even opportunities for optimisation. AWS X-Ray also integrates well with AWS services that are powering your cloud application and also generates a services map that shows your client, backend services, and frontend services.
Check-out the list of features and pricing for AWS X-Ray. You can also check-out a sample application.

<5/> Geeking it up

Webhooks
Learn the most popular approaches for building, securing, and operating webhooks, with recommendations for webhook providers and consumers.

TypeScript Tips
Explained with animations. Master the Similarities and Differences Between Type and Interface, and Understand Their Usage Scenarios

Types of software testing
What is software testing and what are the different types of software testing? We explore unit, integration, functional, performance, and regression tests

As seen on FOX, Digital journal, NCN, Market Watch, Bezinga and more