Image credits to React.js

The State of Things

Aimee Liang
Apr 29 · 3 min read

This week, I received some valuable feedback on how to grow as a developer — and that’s to go back to the basics. I’ve been working with React as a Frontend library, and one of the most important features of React and any Frontend library is state management. There are a number of ways of managing state. In this blog, I’ll review three different methods to do so: useState, Redux, and useContext.

State is one of three key features in React: state, components, and props. State is defined as “a built in object…which allows components to create and manage their own data” (Egyi). I like to think of state as an object that keeps track of how a user interacts with a component, and based on this behavior, may render or display certain information.

useState

The first method of state management is useState, a popular React Hook. This hook “allows you to have state variables in functional components” (LogRocket). useState “returns a stateful value, and a function to update it” (ReactJS). This Hook utilizes local state management. In order to maintain state and allow other components to have access to it, you need to pass it down as props. useState can change on re-render.

useContext

I wrote about useContext previously, but useContext is another React Hook. Unlike useState, useContext is used to manage and maintain global state management. Once something is assigned to useContext, you can import useContext in any component. The benefit of the useContext hook is that this won’t change on re-render because it is set globally.

Redux

Redux is a React library created to manage state. It’s defined as “a predictable state container designed to help you write JavaScript apps that behave consistently across client, server, and native environments and are easy to test” (Ighodaro). State is maintained through a store, and you can designate which components in your app have access to state — and which can change state, using reducers and actions.

There are many benefits to using Redux: it’s easy to debug, it makes state more predictable, and it’s helpful if you need your app to scale up. It is not, however, necessary for all React apps. In fact, Dan Abramov, the co-author of Redux, has said as much: “Come back to Redux if you find a real need for it, or if you want to try something new. But approach it with caution, just like you do with any opinionated tool”.

Please check out the below resources to learn more about state management.

Nerd For Tech

From Confusion to Clarification

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To stay up to date on other topics, follow us on LinkedIn. https://www.linkedin.com/company/nerdfortech

Aimee Liang

Written by

Full Stack Software Developer. Any opinions are my own. aimeeliang.com

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To stay up to date on other topics, follow us on LinkedIn. https://www.linkedin.com/company/nerdfortech

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store