Understanding the behaviour of useEffect() and useState() hooks

Active3 hr before
Viewed126 times

9 Answers


I am not really insterested in the solutions, I am really insterested in understanding how useEffect() and useState() hooks function in this conditions.,But I only wanted to run the useEffect hook when focus/currentFocus is updated and not after every render. So why does this happen? What am I am missing to understand here. ,Please be sure to answer the question. Provide details and share your research!

Hey the useEffect hook can be a bit confusing. But the way to think of it is

useEffect(() => {
   // Called every render

useEffect(() => {
   // Called on first render
}, [])

useEffect(() => {
   // Called when x y & z updates
}, [x, y, z])
load more v

The Effect Hook lets you perform side effects in function components:,Data fetching, setting up a subscription, and manually changing the DOM in React components are all examples of side effects. Whether or not you’re used to calling these operations “side effects” (or just “effects”), you’ve likely performed them in your components before.,We’ve learned that useEffect lets us express different kinds of side effects after a component renders. Some effects might require cleanup so they return a function:

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 (
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
load more v

On top of that, useEffect blocks are candidates to extract into reusable and even more semantic custom Hooks.,In my opinion, understanding the underlying design concepts and best practices of the useEffect Hook is a key skill to master if you wish to become a next-level React developer.,Effects can be tested when used inside of custom Hooks, as we’ll see in the next section

 Pretag team - issue, fix, solve, resolve

We know that useEffect runs after every render, but the behaviour of componentDidMount() is to execute a logic only after first render. Along with a function as a parameter useEffect also accepts second argument which should be an array that tells useEffect to execute the passed function only when the second argument changes.,Implementing componentDidMount() using Hooks:,So, to implement componentDidMount() we can pass an empty array []. By doing this, the function passed in useEffect will always run for the first time but for subsequent re-renders it would not re-run as the value of the array would not change.

useEffect(() => { // perform a task});
load more v

Eh, side effects? What? Let's go off-track for a minute and discuss what a side effect actually is. This will help us understand what useEffect() does, and why it's useful.,To run a hook as the component is about to unmount, we just have to return a function from the useEffect hook:,Since hooks let us use functional components, it means there's less code compared to class components. This makes our code more readable. Well, thats the idea anyway.

 Pretag team - issue, fix, solve, resolve

useEffect - Perform side effects from function components. These are queued for after a re-render to allow for limited iterative behavior in React.,Think of the useEffect Hook as a partial replacement for React lifecycle events. The useEffect Hook can replicate the behavior of componentDidMount, componentDidUpdate and componentWillUnmount methods.,In other words, you can respond to changes in any component that contains the useEffect Hook.

 Pretag team - issue, fix, solve, resolve

Now, this component will be maybe to successfully manage its state if it remains the same between multiple calls of useState and useEffect.,As you can see, we set that to be 0. Then we use the onClick() method to call setCount when we want to increment the value.,These states will have default values, we’ll make use of the useEffect hook to persist the state to either the local storage of our browser or to the title of our document.

function Form() {
   // 1. Use the accountName state variable
   const [accountName, setAccountName] = useState('David');

   // 2. Use an effect for persisting the form
   useEffect(function persistForm() {
      localStorage.setItem('formData', accountName);

   // 3. Use the accountDetail state variable
   const [accountDetail, setAccountDetail] = useState('Active');

   // 4. Use an effect for updating the title
   useEffect(function updateStatus() {
      document.title = accountName + ' ' + accountDetail;

   // ...
load more v

We now need to understand how to access state with useState, how to replace a lifecycle method with useEffect and how to consume a provider using a hook called useContext.,We have successfully converted our KendoReact demo to use a functional component and the basic useState hook. Let's take a look at what our overall changes looked like using an awesome tool called GitHistory:,In the past few sections, we have become familiar with the three basic React Hooks. Now let's take what we have learned and apply that knowledge to a more advanced demo using the useReducer hook. Understanding the basic useState hook can prepare us for learning about useReducer so if you need a refresher, go back to the section: Hooks for State & Effect, for some reinforcement of the fundamentals.

 Pretag team - issue, fix, solve, resolve

The second thing is that we see a warning coming from the  react-hooks/exhaustive-deps eslint rule.,The ‘countCompletedTodos’ function makes the dependencies of useEffect Hook (at line 10) change on every render. Move it inside the useEffect callback. Alternatively, wrap the ‘countCompletedTodos’ definition into its own useCallback() Hook react-hooks/exhaustive-deps,In order to perform a cleanup, our useEffect callback needs to return a function.

 Pretag team - issue, fix, solve, resolve

Other "hooks-usestate" queries related to "Understanding the behaviour of useEffect() and useState() hooks"