React useEffect, dependency list not working

Question

I'm sure I have got the wrong understanding on this. I have the following component

const Comp = () => {
    const filter = 'a';

    useEffect(() => {
      console.log('executing effect');
      loadFriends();
    }, [filter]);


    return (
      <Div>
        {friendsFilter}
      </Div>
    );
  };

Now as per my understanding, since the dependency list on useEffect is filter react should not run the effect when the component gets rendered again ? However it seems to run it. Am I understanding something wrong here?

I'm not trying to use componentDidMount or re-render. I'm trying to ask why it runs the effect even when `filter` value has not changed ? — tmp dev, Feb 03 '20 at 03:43
There has to be something else going on here, I'm sure this is stripped down code, can you provide a more verbose example? — Frank Egan, Feb 03 '20 at 03:53
share the code of loadFriends() block. Probably its altering the value of filter. — Molly, Feb 03 '20 at 04:32
add your full code for better understanding what you are doing in friendsFilter. — Prakash Karena, Feb 03 '20 at 09:26

score 0 · Answer 1 · answered Feb 03 '20 at 04:07

0

If you only want it to run once, use an empty array for the dependency value instead of `[filter]'.

answered Feb 03 '20 at 04:07

Ed Lucas

5,955
4
30
42

score 0 · Answer 2 · answered Feb 03 '20 at 04:16

Well, I have tested your use-case but it doesn't call the useEffect block.

Here is the code which I've tested.

import React, { useEffect, useState } from "react";

const Comp = () => {
  const [count, setCount] = useState(0);
  const filter = "a";

  useEffect(() => {
    console.log("executing effect");
    //loadFriends();
  }, [filter]);

  return (
    <div>
      Div
      <button onClick={() => setCount(count + 1)}> Click me</button>
      Count: {count}
    </div>
  );
};

export default Comp;

Link to codesandbox Even changing the count the component re-rendered but doesn't call the useEffect block.

Most probably there's something happening in loadFriends() which is changing the value of the filter.

React useEffect, dependency list not working

2 Answers2