In REACT state management is a vital part of the general architecture of a REACT app. The first and most powerful state management hook is the useState() hook. This is a very powerful hook and is ideal for tracking a state that does not have complex logic. However, when there is an application with a state that has more complex logic then the useReducer() hook is ideal for this kind of scenario.

Syntax

const [state, dispatch] = useReducer(reducer, initialState)

The reducer is the user-defined reducer function while the initialState is the pre-defined initial state of the application.

Use Case

Let’s start with a simple example of a log-in form that has the email and password. We are supposed to track the state using a reducer function. How can we go about this?

Step 1: Define the initial state and the reducer function

Initial state

const [state, dispatch] = useReducer(reducer, {email: "",passWord: ""});

Reducer Function

Explanation

The reducer function is simply a switch statement that returns something if the test case is true. Here the test case is the type of a predefined action which is ‘handleMail’ and ‘handlePassword’. The …state tracks the previous state and the email and password update the state with a payload (action.payload). The payload is the new state that the user inputs. This ensures that state updates are always tracked.

Step 2: Define the form functions

Explanation

The form functions that handle the email and the password have a dispatch that has an object with the action type and a payload. The type is used to access the action which is used inside the reducer function accessed as ‘action.type‘. The payload stores the form input which is later accessed in the reducer function as ‘action.payload‘.

Step 3:Create the form

Explanation

The form is a simple HTML form. The ‘value’ is the initial state defined in step 1 above. The state changes are tracked through the ‘onChange’ event listener.

Conclusion

The useReducer() hook is a simple and convenient way to update state and share data between our components in an organized way.

Updating the state only requires calling the dispatch(action) with the required action. The reducer() will update the forwarded state. Once the reducer updates the state it will re-render the component with the new state value.

A word of advice is that you should use the useState() hook for simple state management.

Happy coding

Common side effects include:

• API requests.

• Using unpredictable timing functions. e.g setTimeOut or setInterval.

• Directly updating the DOM. e.g using Document/ Window.

Structure

The useEffect() hook accepts two arguments. The dependency normally refers to the re-render array. This array includes all the dependencies that the side effect relies on.

useEffect(<function>, <dependency>

Use Case 1 (Run on first render)

Suppose that we want to fetch data from an API. This usually happens when the app is initially loaded. So to make sure that the API is called only on the first render we write:

useEffect(() => {
//Runs only on the first render
}, []);

Example

  const [todos, setTodos] = useState([]);
  useEffect(() => {fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json =>  setTodos(json))

  },[])

Use case 2: Re-render On Dependency Value Change

We have seen from the example above that when we want the effect to run on the first render we include an empty array. But in some instances, we may want the effect to re-render based on certain dynamic values. This is when we include dynamic values inside the dependency array.

useEffect(() => {
//Runs on the first render
//And any time any dependency value changes
}, [Dynamic state]);

Example

export default function App() {
  const [number, setNumber] = useState(0);
  const [render, setRender] = useState(0)
  useEffect(()=>{
    setRender(number +1)
  },[number])

  const addTwo = () => {
    setNumber(number+1);
  };

  return (
    <div className="App">
      <button onClick={addTwo}>+</button>
      <h3>{number}</h3>
      <h4>number of renders {render} </h4>
    </div>
  );
}

The example above shows how re-rendering is done using the dynamic value ‘number’. Every time the ‘number’ changes the re-render value ‘render’ changes since the side effect re-renders based on the ‘number’ value.

Effect Clean up

The side effects are not supposed to run forever. At some point, the effect must be shut off in order to reduce memory use. All that is needed is a return function that clears a pre-defined time-out.

export default function App() {
  const [number, setNumber] = useState(0);
  const [render, setRender] = useState(0)
  useEffect(()=>{
    let timer = setTimeout(setRender(number +1),1000)
    return ()=>{
      return  setTimeout(timer)
    }

  },[number])

  const addTwo = () => {
    setNumber(number+1);
  };
  return (
    <div className="App">
      <button onClick={addTwo}>+</button>
      <h3>{number}</h3>
      <h4>number of renders {render} </h4>
    </div>
  );
}

The cleanup function will be called when the component is unmounted. The cleanup function is not required in every instance and it is only used when there is a need to stop a repeated side effect when the component unmounts.

Make sure to follow my blog for more REACT tutorials.

Happy coding!