When State Changes React Does Render Again

State is the most circuitous matter in React, and information technology's something both beginners and experienced developers struggle to empathize. So in this article, nosotros'll explore all the basics of country in React.

Before understanding state, allow's first empathize some fundamentals so it'south like shooting fish in a barrel to wrap your head around land later.

How to Render Data in the UI in React

To render anything on the screen, we utilize the ReactDOM.render method in React.

It has the following syntax:

          ReactDOM.render(element, container[, callback])                  

• element tin exist any HTML chemical element, JSX or a component that returns JSX
• container is the element on the UI inside which we want to return the information
• callback is the optional function we tin can pass which gets called once something is rendered or re-rendered on the screen

Take a expect at the below code:

          import React from "react"; import ReactDOM from "react-dom";  const rootElement = document.getElementById("root");  ReactDOM.render(<h1>Welcome to React!</h1>, rootElement);                  

Here'due south a Code Sandbox Demo.

Here, we're simply rendering a single h1 chemical element to the screen.

To render multiple elements we can practise it equally shown below:

          import React from "react"; import ReactDOM from "react-dom";  const rootElement = document.getElementById("root");  ReactDOM.render(   <div>     <h1>Welcome to React!</h1>     <p>React is awesome.</p>   </div>,   rootElement );                  

Here's a Code Sandbox Demo.

We tin can also take out the JSX and put information technology in a variable which is the preferred way of rendering content if information technology gets larger, similar this:

          import React from "react"; import ReactDOM from "react-dom";  const rootElement = document.getElementById("root");  const content = (   <div>     <h1>Welcome to React!</h1>     <p>React is awesome.</p>   </div> );  ReactDOM.render(content, rootElement);                  

Here's a Code Sandbox Demo.

Here, we've also added an actress pair of round brackets to align the JSX properly and to go far a single JSX expression.

If you desire to empathise JSX in detail and its diverse important features, check out my commodity here.

Now, permit'south display a button and some text on the screen:

          import React from "react"; import ReactDOM from "react-dom";  const rootElement = document.getElementById("root");  let counter = 0;  const handleClick = () => {   counter++;   console.log("counter", counter); };  const content = (   <div>     <button onClick={handleClick}>Increment counter</button>     <div>Counter value is {counter}</div>   </div> );  ReactDOM.render(content, rootElement);                  

Here'due south a Code Sandbox Demo.

As you can run into, when we click on the push, the counter value is incremented as you can see in the console. But on the UI it's not getting updated.

This is because we're rendering the content JSX simply in one case using the ReactDOM.return method when the page is loaded. And we're not calling it again – and so even though the value of counter is updating, it's not getting displayed on the UI. So allow's fix this.

          import React from "react"; import ReactDOM from "react-dom";  const rootElement = document.getElementById("root");  let counter = 0;  const handleClick = () => {   counter++;   console.log("counter", counter);   renderContent(); };  const renderContent = () => {   const content = (     <div>       <button onClick={handleClick}>Increment counter</button>       <div>Counter value is {counter}</div>     </div>   );    ReactDOM.return(content, rootElement); };  renderContent();                  

Here'south a Code Sandbox Demo.

Hither, nosotros've moved the content JSX andReactDOM.render method phone call inside a renderContent function. So once it'southward defined, we're calling the part so it volition render the content on the UI on folio load.

Note that we've also added the renderContent part telephone call inside the handleClick function. And so every time we click on the push, the renderContent function volition exist called and we'll see the updated counter on the UI.

Equally can you see, it's working equally expected and the counter value is correctly getting displayed on the UI.

You might think that information technology's plush to re-render the entire DOM again on every button click – but it's not. This is because React uses a Virtual DOM algorithm where it checks what has been inverse on the UI and just re-renders the elements which were changed. And then the entire DOM is not re-rendered again.

Here's a Preview link for the Code Sandbox to endeavour it yourself.

As yous can meet in the HTML construction, only the counter value is re-rendered as it'southward the simply thing flashing in the HTML structure. This is the reason React is so fast and the virtual DOM makes React more useful.

Just still, information technology'southward non feasible to phone call the renderContent office every time we want to update the UI. So React added the concept of Country.

Introduction to Land in React

State allows us to manage changing data in an application. Information technology'due south divers equally an object where nosotros ascertain key-value pairs specifying diverse data we desire to track in the awarding.

In React, all the code we write is divers inside a component.

There are mainly two means of creating a component in React:

• form-based component
• functional component

We'll start with class-based components now. Subsequently in this article, we will run across a functional component way of creating components.

You lot should know how to work with form-based components as well equally functional components, including hooks.

Instead of directly learning functional components with React hooks, you should first understand form-based components and so information technology's easy to articulate the nuts.

You can create a component by using an ES6 class keyword and by extending the Component class provided past React like this:

          import React from "react"; import ReactDOM from "react-dom";  class Counter extends React.Component {   constructor(props) {     super(props);      this.state = {       counter: 0     };      this.handleClick = this.handleClick.bind(this);   }    handleClick() {     this.state.counter = this.land.counter + ane;      console.log("counter", this.country.counter);   }    render() {     const { counter } = this.state;      return (       <div>         <push button onClick={this.handleClick}>Increase counter</button>         <div>Counter value is {counter}</div>       </div>     );   } }  const rootElement = document.getElementById("root"); ReactDOM.render(<Counter />, rootElement);                  

Annotation that the name of the component starts with a majuscule letter (Counter).

Hither's a Code Sandbox Demo.

Let'south explore what we're doing here.

• Inside the constructor part, we're first calling super by passing props to it. Then nosotros've defined the state equally an object with counter equally a property of the object.
• Nosotros're also binding this'southward context to the handleClick function and then within the handleClick function nosotros get the correct context for this.
• Then inside the handleClick function, we're updating the counter and logging information technology to the panel.
• And inside the render method, we're returning the JSX that nosotros want to render on the UI.

The counter is correctly getting updated as yous tin can see in the console – simply it'south not getting updated on the UI.

This is considering we're straight updating the land inside the handleClick function as:

          this.state.counter = this.state.counter + 1        

So React does not re-render the component (and it's also a bad practice to straight update land).

Never e'er directly update/mutate land in React, as it'southward a bad do and it will cause issues in your application. Also, your component will not be re-rendered on land change if you lot make a direct state change.

Syntax of setState

To make the country change, React gives us a setState function that allows usa to update the value of the land.

The setState role has the following syntax:

          setState(updater, [callback])                  

• updater tin either exist a function or an object
• callback is an optional function that gets executed in one case the state is successfully updated

Calling setState automatically re-renders the unabridged component and all its child components. We don't demand to manually re-render as seen previously using the renderContent function.

How to Use a Office to Update State in React

Let's alter the above Code Sandbox to utilize the setState office for updating the state.

Here's an updated Lawmaking Sandbox Demo.

If you check the updated handleClick function, information technology looks similar this:

          handleClick() {   this.setState((prevState) => {     return {       counter: prevState.counter + one     };   });    console.log("counter", this.country.counter); }                  

Here, we're passing a part every bit a first argument to the setState function and nosotros're returning a new state object with counter incremented by 1 based on the previous value of counter.

Nosotros're using the pointer function in the above code, simply using a normal function will too work.

If yous detect, we're correctly getting the updated value of the counter on the UI. But in the console, we're getting the previous counter value even though we've added console.log afterward the this.setState call.

This is because the setState function is asynchronous in nature.

This means that even though we called setState to increment the counter value by 1, it does not happen immediately. This is considering when we call the setState function, the entire component gets re-rendered – then React needs to check what all needs to be changed using the Virtual DOM algorithm so perform various checks for an efficient update of the UI.

This is the reason y'all may not become the updated value for counter immediately after the telephone call to setState.

This is a very important thing to keep in mind in React, as you will see difficult to debug issues if y'all don't write your code keeping in mind that setState is asynchronous in React.

If you desire to get the updated value of the state immediately subsequently the setState call, yous tin laissez passer a office as the second argument to the setState call which will exist executed once the state is updated.

Here'south a Code Sandbox Demo with that alter.

As you can see, nosotros're getting the correct value of counter in the console as shortly equally information technology'southward updated on the UI.

In the above demo, the handleClick role looks like this:

          handleClick() {   this.setState(     (prevState) => {       return {         counter: prevState.counter + 1       };     },     () => panel.log("counter", this.country.counter)   ); }                  

So here, for the setState function telephone call, we're passing two arguments. The first is a function that returns a new land and the second is a callback function that will be called one time the country is updated. We're just logging the updated counter value to the console in the callback function.

Even though React provides a callback function to get the updated state value immediately, information technology's recommended that y'all use it only for quick testing or logging.

Instead, React recommends that you use the componentDidUpdate method, which is a React life cycle method that looks like this:

          componentDidUpdate(prevProps, prevState) {   if (prevState.counter !== this.state.counter) {     // do something     console.log("counter", this.land.counter);   } }                  

Here's a Code Sandbox Demo.

Yous tin can discover more information almost why to employ the componentDidUpdate instead of setState callback here.

How to Simplify State and Method Announcement

If you see the constructor lawmaking in the above Code Sandbox demos, you will meet that it looks similar this:

          constructor(props) {   super(props);    this.state = {     counter: 0   };    this.handleClick = this.handleClick.bind(this); }                  

To use the this keyword within the handleClick event handler, we have to bind it in the constructor like this:

          this.handleClick = this.handleClick.bind(this);                  

Besides, to declare the state, we have to create a constructor, add a super call within it, and and so we tin can declare the state.

This is non but cumbersome just also makes the code unnecessarily complicated.

As the number of result handlers increases, the number of .demark calls besides increases. We can avoid doing this using the grade properties syntax.

Here'due south an updated Code Sandbox Demo with the class backdrop syntax.

Here, we've moved the state directly within the course like this:

          state = {    counter: 0 };                  

and the handlerClick result handler is changed to pointer function syntax like this:

          handleClick = () => {   this.setState((prevState) => {     return {       counter: prevState.counter + ane     };   }); };                  

Equally pointer functions do not have their own this context, information technology will take the context as the form so there is no need to utilize the .bind method.

This makes the lawmaking a lot simpler and easier to understand as we don't demand to go along binding every event handler.

create-react-app already has in-built support for information technology and you can start using this syntax right at present.

We'll be using this syntax from now onwards, equally it is the more popular and preferred way to write React components.

If yous want to learn more about this grade properties syntax, bank check out my commodity here.

How to Utilise ES6 Shorthand Syntax

If you cheque the setState function call in the in a higher place lawmaking sandbox, it looks like this:

          this.setState((prevState) => {   return {     counter: prevState.counter + 1   }; });                  

It's a lot of lawmaking. Just for returning an object from a function, nosotros're using v lines of code.

We can simplify it to a single line as beneath:

          this.setState((prevState) => ({ counter: prevState.counter + i }));                  

Here, we've wrapped the object in round brackets to make it implicitly return. This works because if we accept a single statement in an arrow function we tin skip the return keyword and curly brackets similar this:

          const add together = (a, b) => {   return a + b; }  // the above code is the same equally beneath code:  const add together = (a, b) => a + b;                  

But as the opening curly bracket is considered the start of the function body, we need to wrap the object inside round brackets to brand information technology work properly.

Hither's an updated Lawmaking Sandbox Demo with this change.

How to Utilise an Object equally a State Updater in React

In the higher up code, we've used a function equally the first statement for setState but we can also pass an object every bit an argument.

Here's a Code Sandbox Demo.

The component lawmaking looks like this:

          class User extends React.Component {   state = {     name: "Mike"   };    handleChange = (issue) => {     const value = effect.target.value;     this.setState({ name: value });   };    render() {     const { name } = this.land;      return (       <div>         <input           type="text"           onChange={this.handleChange}           placeholder="Enter your name"           value={name}         />         <div>Hello, {proper noun}</div>       </div>     );   } }                  

Hither, we've added an input textbox where the user types their proper noun and information technology's displayed below the textbox as the user types into the textbox.

In the state, we've initialized the name property to Mike and we've added an onChange handler to the input textbox like this:

          state = {   name: "Mike" };  ...  <input   type="text"   onChange={this.handleChange}   placeholder="Enter your proper name"   value={proper name} />                  

So when we type anything in the textbox, we're updating the state with the value typed past passing an object to the setState function.

          handleChange = (event) => {   const value = event.target.value;   this.setState({ name: value }); }                  

Merely which form of setState should we employ – what's preferred? We have to decide whether to pass an object or a function as a first statement to the setState function.

The respond is: pass an object if you don't need the prevState parameter to discover the side by side state value. Otherwise pass the part equally the offset argument to setState.

But you demand to be aware of one issue with passing an object as an argument.

Take a look at this Code Sandbox Demo.

In the in a higher place demo, the handleClick method looks like this:

          handleClick = () => {   const { counter } = this.state;   this.setState({     counter: counter + one   }); }                  

We're taking the current value of the counter and incrementing information technology by 1. It works fine, equally you can run into below:

Now, take a look at this Code Sandbox Demo which is a modified version of the previous Code Sandbox demo.

Our handleClick method looks similar this at present:

          handleClick = () => {   this.setState({     counter: 5   });    const { counter } = this.state;    this.setState({     counter: counter + 1   }); }                  

Here, nosotros're first setting the counter value to v and and so incrementing it by one. So the expected value of counter is half dozen. Allow's meet if that's the case.

As you can see, when we click the push the first time, we expected the counter value to become 5 – but information technology becomes 1, and on every subsequent click it's incremented by 1.

This is because, every bit we take seen previously, the setState role is asynchronous in nature. When nosotros telephone call setState, the value of the counter does not go 5 immediately, so on the next line we're getting the counter value of 0 to which we've initialized the country in the beginning.

And so information technology becomes 1 when nosotros call setState once more to increment the counter by 1, and it keeps on incrementing by 1 only.

To gear up this consequence, we need to utilize the updater syntax of setState where we pass a function as the commencement argument.

Here's a Lawmaking Sandbox Demo.

In the in a higher place demo, the handleClick method looks like this now:

          handleClick = () => {   this.setState({     counter: 5   });    this.setState((prevState) => {     render {       counter: prevState.counter + 1     };   });    this.setState((prevState) => {     return {       counter: prevState.counter + ane     };   }); }                  

As you can see, when nosotros first click on the push, the value of counter becomes vii. This is every bit expected, because first we prepare it to 5 then incremented it by one twice so it becomes vii. And information technology remains at 7 fifty-fifty if we click the button multiple times, because on every click nosotros're re-setting it to five and incrementing twice.

This is because inside the handleClick we're calling setState to fix the counter value to v by passing an object as the kickoff argument to the setState role. After that, we've chosen two setState calls where we're using the office equally the get-go statement.

Then how does this work correctly?

When React sees a setState call, information technology schedules an update to brand a modify to the country because it'due south asynchronous. Only before it completes the state alter, React sees that there is another setState call.

Because of this, React volition not re-render immediately with a new counter value. Instead it merges all the setState calls and updates the counter based on the previous value of counter every bit nosotros've used the prevState.counter to calculate the counter value.

And once all the setState calls are completed successfully, just and so does React re-render the component. So even if in that location are three setState calls, React will re-render the component only once, which y'all can confirm past adding a console.log argument inside the render method.

Then the point to remember is that y'all should exist careful when using an object as the start statement to a setState telephone call, as it might result in an unpredictable upshot. Employ the role equally the first argument to get the correct result based on the previous result.

You might not call setState again and once more as we've done in the higher up demo, but you might call it inside some other function as shown beneath:

          state = {  isLoggedIn: fake };  ...  doSomethingElse = () => {  const { isLoggedIn } = this.country;  if(isLoggedIn) {    // do something different   } };  handleClick = () => {   // some code   this.setState({ isLoggedIn: truthful);   doSomethingElse(); }                  

In the above lawmaking, we've divers an isLoggedIn land and nosotros have two functions handleClick and doSomethingElse. Within the handleClick part, we're updating the isLoggedIn country value to true and immediately we're calling the doSomethingElse function on the next line.

So inside doSomethingElse yous might think that you're going to get the isLoggedIn state as true and the code within the if condition volition be executed. But it volition non be executed considering setState is asynchronous and the state might not be updated immediately.

That'south why React added lifecycle methods similar componendDidUpdate to do something when state or props are updated.

Keep an middle out to bank check if you're using the same state variable again in the next line or adjacent function to practise some operation to avoid these undesired results.

How to Merge setState Calls in React

Take a expect at this CodeSandbox Demo.

Hither, we have username and counter backdrop declared in the country like this:

          country = {   counter: 0,   username: "" };                  

and handleOnClick and handleOnChange event handlers declared like this:

          handleOnClick = () => {   this.setState((prevState) => ({     counter: prevState.counter + one   })); };  handleOnChange = (event) => {   this.setState({     username: event.target.value   }); };                  

Check the setState calls in the to a higher place functions. You tin see that within the handleOnClick function, we're only setting the country for counter, and inside the handleOnChange function we're merely setting the state for username.

So nosotros don't need to gear up the land for both of the state variables at the same time similar this:

          this.setState((prevState) => ({     counter: prevState.counter + one,     username: "somevalue" }));                  

We can update only the one which we desire to update. React will manually merge the other land properties so we don't need to worry about manually merging them ourselves.

Equally y'all tin see, we're successfully changing the counter and username independently of each other.

How to Apply State in Functional Components in React

Up until now, nosotros've seen how to apply state in class-based components. Allow'south now see how to use it in functional components.

Functional components are similar to class components, except that they do not have country and lifecycle methods. This is why you may have heard them called stateless functional components.

These components only take props and return some JSX.

Functional components make code shorter and easier to understand and test.

They're also a niggling faster to execute, equally they don't take lifecycle methods. They likewise don't have the actress information brought by the React.Component course which we extend in class based components.

Take a wait at this Code Sandbox Demo.

Here, we're loading a list of xx random users from the random user generator API, when the component is loaded inside the componentDidMount method like this:

          componentDidMount() {   axios     .go("https://randomuser.me/api/?page=0&results=twenty")     .then((response) => this.setState({ users: response.data.results }))     .take hold of((mistake) => console.log(error)); }                  

And once we've gotten those users, we're setting it to the users land and displaying it on the UI.

          {users.map((user) => (   <User primal={user.login.uuid} name={user.proper noun} email={user.e-mail} /> ))}                  

Here, we're passing all the data that we need to display to the User component.

The User component looks similar this:

          const User = (props) => {   const { name, email } = props;   const { get-go, final } = name;    render (     <div>       <p>         Name: {first} {last}       </p>       <p>Email: {email} </p>       <60 minutes />     </div>   ); };                  

This User component is a functional component.

A functional component is a function that starts with a capital alphabetic character and returns JSX.

Always call back to start your component name with a capital letter of the alphabet like User whether information technology's a class-based component or a functional component. That's how React differentiates information technology from normal HTML elements when we use them like <User />.

If nosotros utilize <user />, React will check for the HTML element with the name user. Since there is no such HTML element, you'll not get the desired output.

In the above User functional component, nosotros get the props passed to the component inside the props parameter of the function.

So instead of using this.props every bit in class components, we're using simply props.

We never use the this keyword in functional components, then it avoids the various bug associated with this binding.

Therefore, functional components are preferred over grade components.

In one case we have props, we're using the object destructuring syntax to get the values out of it and display on the UI.

How to Utilise State in React Hooks

Starting with version 16.8.0, React introduced hooks. And they've completely changed the way we write code in React. Using React Hooks we tin utilise state and lifecycle methods inside functional components.

React hooks are functional components with added state and lifecycle methods.

So now, there is very little to no difference between class-based components and functional components.

Both of them can accept country and life wheel methods.

Simply React hooks are now preferred for writing React components because they make the code shorter and easier to understand.

You will rarely find React components written using course components present.

To declare state using React Hooks, we need to employ the useState hook.

The useState hook accepts a parameter which is the initial value of the land.

In class-based components, land is always an object. Just when using useState, you tin provide any value as the initial value similar a number, string, boolean, object, array, null, and and so on.

The useState claw returns an assortment whose first value is the current value of the state. The second value is the function which we will use to update the state similar to the setState method.

Let's take an instance of a course based component which uses state. Nosotros will convert information technology into a functional component using hooks.

          import React from 'react'; import ReactDOM from 'react-dom';  class App extends React.Component {   state = {     counter: 0   };    handleOnClick = () => {     this.setState(prevState => ({       counter: prevState.counter + 1     }));   };    render() {     return (       <div>         <p>Counter value is: {this.country.counter} </p>         <push onClick={this.handleOnClick}>Increment</push>       </div>     );   } }  ReactDOM.render(<App />, document.getElementById('root'));                  

Here'south a Code Sandbox Demo which is written using class components.

Let's convert the above code to use hooks.

          import React, { useState } from "react"; import ReactDOM from "react-dom";  const App = () => {   const [counter, setCounter] = useState(0);    render (     <div>       <div>         <p>Counter value is: {counter} </p>         <push onClick={() => setCounter(counter + one)}>Increment</button>       </div>     </div>   ); };  ReactDOM.render(<App />, document.getElementById("root"));                  

Here's a Code Sandbox Demo which is written using React hooks.

Every bit you tin see, using React hooks makes the lawmaking a lot shorter and easier to empathise.

Let'south understand the above code.

• To apply the useState hook, we need to import it as we have washed it in the first line.
• Within the App component, we are calling useState by passing 0 as the initial value and using destructuring syntax. We stored the assortment values returned past useState into counter and setCounter variables.
• Information technology's a mutual convention to prefix the function proper noun used to update the state with the set keyword as in setCounter.
• When nosotros click the increase push button, we are defining an inline function and calling the setCounter function by passing the updated counter value.
• Note that as we already take the counter value, we have used that to increment the counter using setCounter(counter + ane)
• Since at that place is a single argument in the inline on click handler, there is no need to movement the lawmaking into a divide function. Though you lot can do that if the code within the handler becomes complex.

If you want to learn more details about useState and other React hooks (forth with examples), and then check out my Introduction to React Hooks article.

Thanks for reading!

Desire to learn all ES6+ features in detail including let and const, promises, various promise methods, assortment and object destructuring, arrow functions, async/await, import and export and a whole lot more from scratch?

Check out my Mastering Modern JavaScript book. This volume covers all the pre-requisites for learning React and helps y'all to get improve at JavaScript and React.

Check out gratuitous preview contents of the book here.

Also, yous can check out my free Introduction to React Router class to learn React Router from scratch.

Want to stay up to engagement with regular content regarding JavaScript, React, Node.js? Follow me on LinkedIn.

Learn to code for free. freeCodeCamp's open source curriculum has helped more 40,000 people get jobs every bit developers. Get started

hestertherks.blogspot.com

Source: https://www.freecodecamp.org/news/what-is-state-in-react-explained-with-examples/

Share this post