React.js is one of the most widely used JavaScript libraries today, which every frontend developer should know. In the following article, we talked about the state of React and presented everything that new developers of React should know.
Table of Contents
Definition of state in Rickett
The state is a JavaScript object that stores the dynamic data of a component and determines its behavior. Because the state is dynamic, this dynamic enables a component to track information between renders and be dynamic and interactive.
The state can only be used in a class component. If you anticipate that a component will need state management, it should be created as a class component, not an application component. To change the state values, we can use the setState function.
Using state in Rickett
The state of a component must prevail during its lifetime, so we must first have some initial state, for this purpose we must define the state in the constructor of the component class.
The state should never be updated directly
React uses an observable object called to state that observes what changes are made to the state and helps the component behave accordingly. For example, if we update the state of any component like the page below, it will not be displayed again because React State cannot detect the changes made.
;” this.State.attribute= “new-value
Therefore, React provides its own setState() method. The setState() method takes a parameter and expects to update an object, which should be an array of values. After updating, the method implicitly calls the render() method to repaint the page.
The only time we are allowed to explicitly define state is in the constructor that provides the initial state.
React is very efficient and therefore uses asynchronous state updates, meaning that React may update multiple setState() updates at once. Therefore, using the current state value may not always produce the desired result.
State updates are independent
A component’s state object may have multiple properties, and React allows the setState() function to update only a subset of these properties, as well as multiple setState() methods to update each attribute value independently.
But is it possible to add user-defined functions in addition to the constructor and rendering methods? Yes, we can also create user-defined functions inside a class, but how do we call them? React provides a few special methods that are appropriate in some contexts that solve this problem.
What is the difference between props and state in Rickett?
Props are used to pass data between React components. React data flow between components is unidirectional (parent to child only).
Components receive data from the outside with props, while they can create and manage their data with the state. Props are used for data transfer, while the state is for data management. Data provided by props is read-only and cannot be modified by the component receiving it from outside. The state data can be modified by its components, but it is private (not accessible from the outside).
props are only passed from parent to child. (unidirectional flow)
Changing the state should happen with the setState() method.
Why don’t we directly modify the state in react?
Everyone says don’t do this, never mutate state directly, and always call setState.
But why?
If you have tried it, you may have noticed that nothing bad happened. If you modify the state directory, call this.setState ({}) or even this.forceUpdate(), so everything seems to be fine.
This idea is bad (even if it works in this example and others) for two reasons.
- (Other patterns to avoid are state. something = x and this.state = x)
- Direct deformation mode can lead to weird bugs and components that are difficult to optimize. Consider an example.
As you may already know, a common way to set a React component to perform is to make it “pure”, which causes it to re-render only when its props change (rather than every time the parent re-renders it. ). This can be done automatically by extending React.PureComponent instead of React.Component or manually by running the shouldComponentUpdate lifecycle method to compare the next props with the current props. If the props look the same, it skips rendering and saves time.
Adding an immutable item immutably is good and adding an item mutable is bad.
This happens because ItemList is pure and pressing a new item on this. state. items array does not replace the underlying array, when ItemList is asked to render again, it finds that its props have not changed and are not rendered again.
This is why you shouldn’t create a state jump, even if you call setState immediately. If you do this, optimized components don’t rerender and it’s hard to track rendering bugs. Instead, always create new objects and arrays when calling setState.