Javascript, React, React hooksApril 2, 2020July 8, 2020

React hooks – useEffect hook explained Part 3

How can I add performance to my component when I’m using useEffect hook?

Well, we can tell react to skip applying an effect if certain values haven’t changed between re-renders, so here some examples:

In this example, we will insert a second parameter in the useEffect, this second parameter is an array that tell react when we want our effect to be called.

Note: do not forget that always we will have a first render with or without second parameter in the useEffect.

// Dependencies
import React, { useState, useEffect } from 'react';

// Styles
import './App.css';

function App() {
  // Local state
  const [count, setCount] = useState(0);

  // useEffect runs both after the first render and after every update
  useEffect(() => {
    console.log('Clicked times ->', count); // each effect “belongs” to a particular render

  }, [count]); // If count have changes then a effect will re-run

  return (
    <div className="App">
      <p>Clicked times { count }</p>

      <button
        type="button"
        onClick={() => setCount(count + 1)} // Changing the value of the local state
      >
        Click me!
      </button>
    </div>
  );
}

export default App;

Then in this next example I’m forcing the counter to be the same all the time, so because the count never change then the effect only will have the first render but not more.

React
// Dependencies
import React, { useState, useEffect } from 'react';

// Styles
import './App.css';

function App() {
  // Local state
  const [count, setCount] = useState(5); // My initial state value is 5

  // useEffect runs both after the first render and after every update
  useEffect(() => {
    console.log('Clicked times ->', count); // each effect “belongs” to a particular render

  }, [count]); // If count have changes then a effect will re-run // the value is the same so no re-run the effect

  return (
    <div className="App">
      <p>Clicked times { count }</p>

      <button
        type="button"
        onClick={() => setCount(4 + 1)} // This value is the same at the initial state value 5
      >
        Click me!
      </button>
    </div>
  );
}

export default App;

Other important thing here is that If we want to run an effect and clean it up only once (on mount and unmount), we need to pass an empty array ([]) as a second argument.

This tells React that your effect doesn’t depend on any values from props or state, so it never needs to re-run.

Note: using [ ] just run the first time, that’s it.

// Dependencies
import React, { useState, useEffect } from 'react';

// Styles
import './App.css';

function App() {
  // Local state
  const [count, setCount] = useState(0); // My initial state value

  useEffect(() => { // effect
    console.log('Clicked times ->', count); // Just the first render

  }, []); // Acts as componentDidMount and componentWillUnmount,  so it never needs to re-run the effect

  return (
    <div className="App">
      <p>Clicked times { count }</p>

      <button
        type="button"
        onClick={() => setCount(count + 1)} // Updating the local state
      >
        Click me!
      </button>
    </div>
  );
}

export default App;