State Information Flow in React

What is State?

State is dynamic data in a React application. React re-renders child components when state changes. State should only be used for data that is expected to change throughout the life of the component. It should also be used sparingly, as it can become difficult to track throughout complex applications.

useState

In order to utilize state in an application, you must import the useState hook from React.

import React, { useState } from "react";

The useState hook returns an array with two variables, a reference to the current state and a callback function that can be used to update state. You can pass an initial value for state into useState as well.

// initial value for state is "" //
const [state, setState] = useState("");

Whenever the callback function, or setter function, is called, React re-renders the child components that are affected by change in state. React's documentation states to always use the setter function to update the value of state. Never directly assign the value of the state variable, except upon initialization.

State updates asynchronously, therefore if you are using the current value of state to update state, you must use the callback syntax.

const [count, setCount] = useState("0");

// incorrect //
setCount(count + 1);

// correct - uses callback syntax //
setCount((count) => count + 1);

Read more about the useState hook in the React docs here.

Passing State from Parent to Child Components

Information Flows Down

State can be passed to child components as a property in the same way we pass other properties . The useState hook should be imported and state should be declared at the highest common parent component level and then passed to the child components that need access to it.

// Parent //
import React, { useState } from "react";

function Parent() {
const [count, setCount] = useState("0");

return (
<Child 
count={count}/>
)}

In the example above, the count variable destructured from useState is being passed down as a prop to the Child component. Just like with other kinds of props, the Child component needs to take in this prop and can then utilize it. State variables can be passed down to multiple child components.

Passing State from Child to Parent Components

Information Flows Up

When passing state up from a child component to a parent, we must still initialize state at the highest parent component level. In order to pass state up from the child component, we pass down a callback function from the parent component as a prop.

// Parent //

import React, { useState } from 'react';

function Parent() {
const [search, setSearch] = useState("");

function handleSearch(e) {
setSearch((e) => e.target.value) 
}

return (
<Child 
search={search}
onSearch={handleSearch}/>
)}

// Child //

import React from 'react';

function Child({ search, onSearch ) {
return (
<input 
type="text" 
value={search}
onChange={onSearch}></input>
)}

In the above example, search is being passed from the Parent component to the Child component. The onSearch property is passing down a callback function, handleSearch, to the Child component. When the input text in the Child component is changed, onSearch sets the value of search to e.target.value at the Parent component level, which is where our state is held. All of the child components of Parent are then re-rendered with the updated state. Passing state up as a callback function ensures other components utilizing state are also updated and that only one value for state is held.