useEffect has a missing dependency

Question

I want to implement componentDidMount in hooks that I want to do something for the first rendering ONLY, so in the useEffect, I set the dependency array as empty, but eslint has the warning that dependency is missing. how to solve it?

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";

const Child = ({ age }) => {
  useEffect(() => {
    console.log("simulate componentDidMount, age:", age);
  }, []);

  useEffect(() => {
    console.log('simulate componentDidUpdate, age:', age)
  }, [age])

  return <div>age: {age}</div>;
};

const App = () => {
  const [age, setAge] = useState(0);
  const handleOnClick = e => {
    e.preventDefault();
    setAge(a => a + 1);
  };
  return (
    <>
      <Child age={age} />
      <button onClick={handleOnClick}>INCREASE AGE</button>
    </>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Asaf Aviv · Accepted Answer · 2019-11-29 02:56:33Z

You can store the first render in a ref and do what you need to do when isFirstRender.current is true, this way you don't need to add anything but age to your effect and can combine cDM and cDU together, storing the lifecycle in state doesn't make sense to me.

const Child = ({ age }) => {
  const isFirstRender = useRef(true);

  useEffect(() => {
    if (isFirstRender.current) {
      isFirstRender.current = false;
      console.log("simulate componentDidMount, age:", age);
      return
    }
    console.log('simulate componentDidUpdate, age:', age);
  }, [age]);

  return <div>age: {age}</div>;
};

You can also extract it into a custom hook if you want to reuse it

const useIsFirstRender = () => {
  const isFirstRender = useRef(true);

  useEffect(() => {
    isFirstRender.current = false;
  }, []);

  return isFirstRender.current;
};

const Child = ({ age }) => {
  const isFirstRender = useIsFirstRender();

  useEffect(() => {
    if (isFirstRender) {
      console.log("simulate componentDidMount, age:", age);
      return;
    }
    console.log('simulate componentDidUpdate, age:', age)
  }, [age, isFirstRender]);

  return <div>age: {age}</div>;
};

Elder · Accepted Answer · 2019-11-29 00:05:11Z

2

It says the dependency is missing because you do use age inside your useEffect, even if it's just for printing it out, so eslint probably believes you should add age do the dependency list.

useEffect(() => {
    console.log("simulate componentDidMount, age:", age); //age is being used here
  }, []);

answered Nov 29, 2019 at 0:05

Elder

1,51412 silver badges20 bronze badges

4 Comments

Huan Li Over a year ago

if I add age into dependency, later when age is updated, the function inside useEffect would be invoked again. I want to implement something similar to componentDidMount which is invoked only once

Elder Over a year ago

I understand, but if you want to print out age in that useEffect while still keeping the componentDidMount, you'll have to ignore the warning.

Huan Li Over a year ago

do you reckon if it is better to have a local state to record if it is first rendering?

Richard Matsen Over a year ago

@HuanLi - better to have local state to record first rendering, no in my opinion too complicated. You know the purpose of your code better than eslint, just suppress the warning. I use }, []); // eslint-disable-line all the time.

Leo Farmer · Accepted Answer · 2019-11-29 00:50:14Z

2

You could do something like this if you don't want to disable eslint:

const [component_mounted, set_component_mounted] = useState(false)

useEffect(() => {
    if(!component_mounted) {
      // Use age here
      set_component_mounted(true)
    }
  }, [age, component_mounted, set_component_mounted])

answered Nov 29, 2019 at 0:50

Leo Farmer

7,9606 gold badges35 silver badges48 bronze badges

1 Comment

Richard Matsen Over a year ago

One point for correct code, but how noisy is that? (compared to a linting comment)

Singhi John · Accepted Answer · 2019-11-29 00:33:21Z

0

React doesn't care how you use the state. So printing the age has no difference from putting the age in some logic computing. Eslint did right.

answered Nov 29, 2019 at 0:33

Singhi John

3472 silver badges10 bronze badges

1 Comment

Huan Li Over a year ago

You don't get my point. I would like to implement componentDidMount without eslint warning

Collectives™ on Stack Overflow

useEffect has a missing dependency

4 Answers 4

Comments

4 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related