How to Bring Reactivity into React with States
This is part of my “React for beginners” series on introducing React, its core features and best practices to follow. More articles are coming!
If you know how to display a React component — that’s great. Now, let’s give our components their own data.
Disclaimer: This article focuses on React’s built-in state. Note that component state and Redux are not incompatible, as their purpose is different.
In my opinion, component state is specific to the component scope (for form completion). Besides, Redux state helps with sharing the same state among many components.
Do I need a state?
To learn states, let’s create a
Question component. It will display a yes/no question and ask for an answer.
Questioncomponent contains only three functions:
constructorfor initialization (props and state),
answerQuestionis a callback triggered when the user answers
renderthat you probably already know — it outputs the component’s template.
This component has two distinct states. The question is not answered, or the question has an answer.
Props are only used for the question label, and besides, the state’s purpose is far more interesting.
The state is the component memory which remembers if the question has an answer. If so, it also knows the answer.
Transform state into props
Using a state in a component is easy. You have to initialize the state and call
setStatefunction whenever you want to update its content.
Imagine being a component. If your state changed, your reaction would be to check if you have to update your display.
Components get props from other components. If those props change, then the component will update.
Actually, you already know how it works — but let’s take the example of a
Survey containing some
Survey contains question labels in its state and gives it to
Question as a property.
Survey updates its state (calls
render function triggers. If so, it sends a request for
Question rendering (details in React doc).
Adopt container pattern
Decoupling the view and the rest of the code has always been a big concern among developers. That’s why most of the design patterns used in frameworks extend from the MVC pattern.
If you use React with Redux, you already know the container pattern. Actually, it’s a built-in Redux feature through the connect function.
It’s time to split the
Question component into two components.
Question will be responsible for rendering props. This kind of component is called either functional, presentational, or a dumb component.
QuestionContainer will deal with state management.
For comparison with the MVC design pattern,
Question is a View and
QuestionContainer is a Controller.
Other components which need
Questionwill now use
QuestionContainer instead of
Question. This consideration is quite accepted in the community.
Be careful about setState anti-pattern
setState is pretty straightforward.
Pass the next state as the first and only parameter. It will update current state properties with the new passed values.
To sum up, don’t use
Those variables may not have the values you expect. React optimizes state changes. It squashes multiples changes into one for performance issues (before Virtual DOM optimizations).
You should prefer the other form of
setState. Provide a function as the only parameter and use
state parameters (see the documentation).
The complete survey component
In this article, we’ve covered the main state usages in React. You can find the complete code for the
Survey component in the following Codepen.
That was all about states. You’ve encountered components, props, and states, and now you have the beginner kit to play with React.
I hope you enjoyed reading this article and learned a lot of things!
If you found this article useful, please click on the ? button a few times to make others find the article and to show your support! ?
Don’t forget to follow me to get notified of my upcoming articles ?
This is part of my “React for beginners” series on introducing React, its core features and best practices to follow.
Check out my Other Articles
- Common Mistakes to Avoid While Working with Vue.js