How to use useState and useEffect in functional components.

Photo by Camille Orgel on Unsplash

What are hooks?

Hooks are basically used to manage states in functional components and there are several considerations you have to follow when using hooks which are,

• Hooks cannot be used inside a condition, loop or nested function.
• Hooks cannot be called from a class component or regular java script functions.

You can find out about class component life cycle methods from following.

React Life Cycle Methods

useState hook

useState hook initialise the state in the functional component. It will output two things,

• A value to access.
• A function to change the value.

const [name, setName] = useState("Yashod");

Following is a basic demo of useState hook.

import React, { useState } from "react";
const Counter = () => {
  const [count, setCount] = useState(0);
  const increment = () => {
    setCount(count + 1);
  };
  
  const decrement = () => {
    setCount(count - 1);
  };
  
  return (
    <>
      <p>{count}</p>
      <button onClick={() => increment()}>Increment</button>
      <button onClick={() => decrement()}>Decrement</button>
    </>
  );
};
export default Counter;

But there is a safe way of update the state which is using the previous state as in the class component as follows.

setCount(prevCount => prevCount - 1);

Important — If you need to initialise a value from a complex function then there is a special way of use useState or else it will execute in every update which will decrease the performance.

const [count, setCount] = useState(() => {
  function()
});

Handle Objects with useState

Object handling is bit different in useState which can be easily understand by following example.

import React, { useState } from "react";
const ObjectState = () => {
  const [obj, setObj] = useState({ count: 0, name: "Amal" });
  const increment = () => {
    setObj({ ...obj, count: obj.count + 1 });
  };
 
  return (
    <>
      <p>{obj.count}</p>
      <p>{obj.name}</p>
      <button onClick={() => increment()}>Increment</button>
    </>
  );
};
export default ObjectState;

There is an other variation of useState using previous value as follows.

const increment = () => {
    setObj(prevObj => {
        return { ...prevObj, count: prevObj.count + 1 }
    });
};

useEffect hook

useEffect is used to handle mount, update and unmount which is similar to the componentDidMount, componentDidUpdate and componentDidUnmount and for all 3 useEffect is used. Following is the structure of the useEffect

useEffect({
  // code 
}, []);

The array at the latter part will contain the states and useEffect is triggered only if those states are changed.

There are several cases that you need to know regarding the useEffect.

• Trigger in every update.

useEffect({
  // code
});

• Only when component is mounted.

useEffect({
  // code
}, []);

• Only when component is unmounted.

useEffect({
  return = () => {
    // code
  };
}, []);

• Only count is changed.

useEffect({
  // code
}, [count]);

Common mistake done in useEffect

Do not update state inside a useEffect unless depends on other state. Confusing? Let’s do an example.

const [a, setA] = useState(1);
const [b, setB] = useState(5);
// Do not do - Infinite loop
useEffect({
  setA(3);
});
// Do not do - Infinite loop
useEffect({
  setA(3);
}, [a]);
// Can do
useEffect({
  setA(3);
}, [b]);

References

Introducing Hooks - React

Using the State Hook - React

Using the Effect Hook - React

Hopefully this is helpful.

If you have found this helpful please hit that 👏 and share it on social media :).