When to use useEffect?

Question

I'm currently looking at the react doc's example for useEffect

import React, { useState, useEffect } from 'react';  function Example() {   const [count, setCount] = useState(0);    // Similar to componentDidMount and componentDidUpdate:   useEffect(() => {     // Update the document title using the browser API     document.title = `You clicked ${count} times`;   });    return (     <div>       <p>You clicked {count} times</p>       <button onClick={() => setCount(count + 1)}>         Click me       </button>     </div>   ); }  

My question is that we can easily make a handleClick function for the button. We don't have to use useEffect

const handleButtonClick = () =>{ setCount(count+1) document.title = `You clicked ${count +1} times` }  <button onClick={handleButtonClick}/> 

So which way is considered good practice? Is it best to only use useEffect to trigger side effects that strictly couldn't be done along with the main effect(i.e when component receive new prop)

Answer 1

The idea to use useEffect hook is to execute code that needs happens during lifecycle of the component instead of on specific user interactions or DOM events.

For instance, you wish to set a timer that executes a code when the component is rendered initially or as done in your initial example, the document title is updated when the component mounts, there is no user interaction associated here

useEffect is an alternative for lifecycle method in class components in a functional component. It can be used to execute actions when the component mounts, or certain prop or state updated for component as well as to execute code when the component is about to unmount

Answer 2

You showed two different examples,

handleButtonClick fires on Button 1 click, while useEffect fires on every state change state (according to the dependency array).

In the next example, you notice that useEffect will log on every button click (Button 1/2), and handleButtonClick will log only on Button 2 click.

import React, { useState, useEffect } from "react";  function Example() {   const [count, setCount] = useState(0);    useEffect(() => {     console.log(`You rendered ${count} times`);   }, [count]);    const handleButtonClick = () => {     setCount(count + 1);     console.log(`You clicked ${count + 1} times`);   };    return (     <div>       <p>You clicked {count} times</p>       <button onClick={() => setCount(count + 1)}>Button 1</button>       <button onClick={handleButtonClick}>Button 2</button>     </div>   ); } 

• Check similar question on useEffect use cases
• Refer to useEffect docs