10 State - biswajitsundara/react GitHub Wiki

State means data being used in the component at that particular time

• Data means arrays, objects, strings, booleans etc
• Data change is the most frequent use case in web applications (e.g by clicking a button)
• We can say, the state is a built-in React object that contains data or information about the component.
• A component's state can change over time
• And Whenever it changes, the component re-renders to reflect the changed values
• The data/data type can be anything object, array, number, boolean etc.

Let's say we are displaying a text and on clicking a button we want to change the text.

• After clicking on the button the name value changes but the change doesn't reflect on UI.
• Because react renders the data once and then its not watching the variable for changes
• So when the data changes it doesn't trigger the re render of the component

import React from "react";

const Problem = () => {
  let name = "John Doe";

  const clickHandler = () => {
    name = "Jany Clark";
    console.log(name);
  };

  return (
    <div>
      <p>{name}</p>
      <button onClick={clickHandler}>Change Name</button>
    </div>
  );
};

export default Problem;

• The solution is we need to use useState hook
• Hooks are special functions in react designed to do a specific task
• We can tell what it does from its name
• The name starts with use and then the hook name (e.g useState to manage state)
• The use state hook give us the state of the data and provides us a way to change it.
• When the state changes, react will re-render the component

import { useState } from "react";

const Solution = () => {
  const [name, setName] = useState("John Doe");
  const [age, setAge] = useState(23);

  const clickHandler = () => {
    setName("Jenny Clark");
    setAge(30);
  };

  return (
    <div>
      <p>
        {name} is {age} years old
      </p>
      <button onClick={clickHandler}>Change Name</button>
    </div>
  );
};

export default Solution;

• name and age are the variable names
• Usually the state updating functions follow the naming convention set<variable_name>
• setName is the function to manage the state of the name variable.
• John doe is the initial state / value assigned to the variable name.
• When the click event happens it updates the state to Tifany
• As we know when the state changes, it re renders the component
• And now the name value is changed to Tifany, so we see that on UI.

Lets say we have a bill payment application

• There's a message you have an outstanding bill amount
• when the user pays the bill, the message changes to Your bill is paid

import { useState } from "react";

const PaymentCard = () => {
  const [message, setPayment] = useState(
    "You have an outstanding bill amount of $100"
  );
  return (
    <div>
      <h1>{message}</h1>
      <button onClick={() => setPayment("Your bill is paid")}>Pay</button>
    </div>
  );
};

export default PaymentCard;

• The useState Hook allows us to track state in a function component.
• Props are like function parameter (we pass data from outside to the component)
• States are like local variable of a function
• The change in state can be done based on user interaction or by system generated events.
• This can't be used in class component (class has different way of doing this)