React is a popular JavaScript library for building user interfaces. Originally created by Facebook, React is known for its declarative approach towards rendering components. The dynamic nature of applications requires a way to manage changes over time. In walks React State, one of the core concepts of React. Really understanding state and its purpose can drastically change how developers build effective, efficient, and interactive UIs. Similar to my previous experience with JavaScript context, I had a really tough time nailing .this down (see what I did there?). This blog post will give a detailed breakdown of the purpose of state, why we use it, and how we use it.
What is React State? Why Do We UseState()?
"state" is an object that holds data which may change over the lifetime of a component. It allows components to create, modify, and delete properties that are internal to them, which in turn leads to dynamic changes in the rendered output. While React props allow external data passage from a parent to a child component, they don't actually change the components internal data.
State represents data that can change and affect the component's behavior, therefore causing a re-render. However, unlike the DOM's state, the React state is maintained within the React ecosystem, ensuring a smoother and more efficient rendering process.
Let's take an input field in a form as an example. As a user types text into an input field, we want a way to track what is being input while it is being filled out. State allows us to track that data, and even control what the user is allowed to input. Say we only want the user to be able to input 50 characters, or only be able to input a URL: State allows us to track how many characters are in the field, or require a field to include 'https://' before the form is able to be submitted. It can even be used to prompt an error message if the user attempt to submit the form outside of the guidelines we set in state.
Without state, React components would be static, which isn't ideal for most applications that need to respond to user inputs. Other examples for state include a toggle button’s on/off state and data fetched from an API - both represent various states of an application.
How do we useState()?
Above is a simple use of React State. React state is imported with the hook useState from React. Our component then declares a state by de-structuring useState() into a state variable and a setState() function. The setState() function will allow us to set the state later on. We than set the state of the count variable with useState(), setting it to '0'.
Returned in our JSX, we have a button with an onClick event that sets the state of count to whatever it's current state is + 1. Once the user clicks the button, the component is re-rendered and that state of the count variable is changed to 1. It's important to keep in mind that this happens asynchronously. If you were to console.log count immediately after you set it's state, it's not going to reflect that state until after the component is re-rendered.
Conclusion: How Are State and Context Related?
I like to think of state as a personal diary of a component. It's private, it changes over time, and it influences the behavior and mood of the component. Similar to how context in JavaScript sets the scope and gives us access to .this, React state gives components the ability to create and manage their own context or data scope.
React State is a very powerful feature that makes React a stand-out library for building user interfaces. I encourage everyone to get into a React project and play around with state hands-on to really understand its functionality. As a beginner, I was eventually able to nail this concept down in my most recent project, and you can too! Never be afraid to experiment and try news things, and as always, happy coding!
Top comments (0)