Multiple React effect hooks for the same dependency

Asked
Active3 hr before
Viewed126 times

7 Answers

hooksmultiplereact
90%

Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers ,Would it be valid code to separate this logic into their own effect hooks with the same dependencies:,Let's say I have an effect hook with a Person dependency that follows the schema Person: {name: string, age: number}. My effect hook for this Person dependency currently looks like this:

You are correct. Although, I would check person properties on each individual effect call separately. Check the react docs here for a good example. ( I really dislike when others are answering and I'm still typing...)

 // effect that handles any logic for a person's name
 useEffect(() => {
    if (person.name === 'Mike') {
       doSomething()
    }
 }, [person.name])

 // effect that handles any logic for a person's age
 useEffect(() => {
    if (person.age > 21) {
       somethingElse()
    }
 }, [person.age])
load more v
88%

As we can see in the React documentation, the way we use the effect hook looks like this:,deriving it from some primitive values inside the effect function,swapping useEffect for the useDeepCompareEffect hook

useEffect(fn, deps);
load more v
72%

The Effect Hook lets you perform side effects in function components:,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:,There are two common kinds of side effects in React components: those that don’t require cleanup, and those that do. Let’s look at this distinction in more detail.

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>
  );
}
load more v
65%

Technofunnel brings another article on “useEffect Hook in React”. Hooks are the new features of React 16.8. We can create state variables and other features of React without using Class-Based Components. Hooks are used for Function Components. We have various Hooks provided by React:

Pretag
 Pretag team - issue, fix, solve, resolve
75%

React’s effects are a completely different animal than the lifecycle methods of class-based components. The abstraction level differs, too.,If you are a seasoned React developer and are familiar with class-based components, of course you have to do some of the same things in your projects today as you did two years ago when there were no Hooks.,I hope these example have convinced you that working with effects is different from lifecycle methods and that it is ultimately not beneficial to try to mimic these methods.

Pretag
 Pretag team - issue, fix, solve, resolve
40%

In this first problem, let’s say we have an object being passed in as a prop that we’re also using in the dependencies list of useEffect.,I’ve already discussed dealing with helper functions in the previous post, so in this post I want to focus on options we have when dealing with objects or arrays as useEffect dependencies.,Back in October, I gave four options for dealing with helper functions listed as dependencies in the React useEffect Hook. I promised to share other gotchas around useEffect dependencies in follow-up posts. So now I want to give four more options, but this time dealing with objects or arrays in dependencies.

const Example = () => {
  const [count, setCount] = useState(0)

  useEffect(() => {    document.title = `You clicked ${count} times`  })
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}
load more v
22%

Below is the example of useEffect having multiple dependencies.,Below is an example of useEffect having single dependency:,UseEffect is a hook in react which was created to be used in a functional component. useEffect hook can be used in different scenarios depending on our need i.e.

Pretag
 Pretag team - issue, fix, solve, resolve

Other "hooks-multiple" queries related to "Multiple React effect hooks for the same dependency"