Effects with React useEffect

Some practical examples of how to use the React useEffect() -

import React from "react";

export default function App() {
  const [name, setName] = React.useState('');
  const [age, setAge] = React.useState(0);

  React.useEffect(() => {
    console.log('component mounted');

    return () => {
      console.log('component unmounted');
    }
  }, []); // empty array means it will only run on mounting

  // Separation of concerns
  // This is a good example of how to separate concerns splitting into two useEffects to handle each value
  React.useEffect(() => {
    console.log('name changed', name);
  }, [name]); // only triggers when name changes

  React.useEffect(() => {
    console.log('age changed', age);
  }, [age]); // only triggers when age changes

  return (
    <div>
      <input type="text" value={name} onChange={e => setName(e.target.value)} />
      <input type="number" value={age} onChange={e => setAge(e.target.value)} />
    </div>
  );
}

Console

On Mounting

Similar to the legacy componentDidMount it will trigger on mounting the component:

React.useEffect(() => {
  console.log('component mounted');

  return () => {
    console.log('component unmounted');
  }
}, []); // empty array means it will only run on mounting

Read-only

On Changing Values

React.useEffect(() => {
  console.log('name changed', name);
}, [name]); // only triggers when name changes

Read-only

Separation of Concerns

Instead of watching two values at the same useEffect, like the following:

React.useEffect(() => {
  console.log({ name, age });
}, [name, age]);

Read-only

Think in separation of concerns, and split each it will be cleaner and easier for the next person who need to read your code, eg:

// Separation of concerns
// This is a good example of how to separate concerns splitting into two useEffects to handle each value
React.useEffect(() => {
  console.log('name changed', name);
}, [name]); // only triggers when name changes

React.useEffect(() => {
  console.log('age changed', age);
}, [age]); // only triggers when age changes

Read-only