DEV Community: Amit K.। 🎧

"Function makes the dependencies of useEffect Hook change on every render" warning in React

Amit K.। 🎧 — Tue, 07 Mar 2023 19:17:39 +0000

If you work with the useEffect hook, you have likely encountered the following warning:

The ‘functionName’ function makes the dependencies of useEffect Hook (at line X) change on every render. Move it inside the useEffect callback. Alternatively, wrap the definition of ‘functionName’ in its own useCallback() Hook. (react-hooks/exhaustive-deps)

So what’s going on here and how do we fix it?

A contrived example

Let’s check a quick example. We’ll have a simple react app and updateCount function which we will call inside useEffect hooks and we need to pass the function name in dependency array or it will show React Hook useEffect has missing dependency warning. What we want here is every time count changes, we want to run an effect that logs the count to the console. So we write the following code:

function App() {
  const [count, setCount] = useState(0);

  const updateCount = () => {
    console.log(count);
  };

  useEffect(() => {
    updateCount();
  }, [updateCount]);

  return <div>{count}</div>;
}

And now we see the warning! So, lets use it to explore what’s happening.

Dependency arrays and referential equality

In our example, our useEffect hook has the updateCount function in its dependency array. That means the effect will run every time after updateCount changes.

You might be thinking that updateCount is a function and it doesn’t really changes after each render. But we have to remember that JavaScript equality works based on referential equality. According to the principle of Object.is(), any two objects pointing to the exact memory location are considered equal or only equal to each other if they reference the same object in memory. That’s why when we compare two objects with same key and value we end up with something like this:

console.log({ name: 'foo' } === { name: 'foo' });
// false

These two objects live separately in memory and are therefore not equal.

This works the same way for functions:

const fn1 = () => 'bar';
const fn2 = () => 'bar';

console.log(fn1 === fn2);
// false

And this is what’s happening in our useEffect dependency array. The updateCount function is recreated on each render and so it be will always be different than the updateCount function created during the previous render.

How to fix this?

Well, the warning message is actually pretty helpful and itself gives us the solutions that will help us fix the problem:

Move updateCount inside the useEffect hook
Wrap updateCount in a useCallback hook

I’ll show you both solution here.

Moving updateCount inside the useEffect hook
This one is fairly straightforward: we take the updateCount function and move it inside the useEffect hook. Now the updateCount is now inside the useEffect hook, we no longer need it in the dependency array. However, since updateCount depends on the count variable, we’ll have to add the count variable to the dependency array.

Our fixed code now looks like this:

function App() {
  const [count, setCount] = useState(1);

  useEffect(() => {
    const updateCount = () => {
      console.log(count);
    };
    updateCount();
  }, [count]);

  return <div className="App">{count}</div>;
}

And the warning is gone!

Wrapping updateCount in a useCallback hook
Let's consider a situation in which you need updateCount to call elsewhere in the component, putting it inside the effect could cause it to be undefined elsewhere.

For this solution we need to wrap the updateCount function definition in a useCallback hook. What this does is returns a memoized function whose reference will only change if something in the hook’s dependency array changes.

Let’s take a look at the correct implementation:

import { useState, useEffect, useCallback } from 'react';

function App() {
  const [count, setCount] = useState(1);

  const updateCount = useCallback(() => {
    console.log(count);
  }, [count]);

  useEffect(() => {
    updateCount();
  }, [updateCount]);

  return <div className="App">{count}</div>;
}

Now that we have wrapped our updateCount function in a useCallback hook, it will maintain the same memory reference through each render—unless something in its dependency array changes. In this case, we added count to the dependency array. We need the function to update when count updates or our effect won’t run.

Conclusion

React dependency array issues can be pretty tricky. But, there’s always a solution!

# Basic Linux Commands List

Amit K.। 🎧 — Mon, 18 Nov 2019 19:21:34 +0000

You might already know a few of these Linux command tips or perhaps all of it. In either case, you are welcome to share your favorite tricks in the comment section.

Why Use the Command Line?

Both the GUI(Graphical User Interface) and CLI(Command Line Interface) are ways you can interact with your computer.
But when it comes to the command line, once you learn the commands, it is faster and more powerful to navigate and use your computer. This is why many programmers prefer the command line.

What are Flags?

Most command line utilities take parameters using flags. Flags usually come in short form (-h) and long form (--help).

Quick note : I’m only listing the most frequent uses here. If you want to learn more, you can use your terminal to see the manual.

> For that type man command_name in your terminal

'users' Command

Users command displays currently logged in users.

# users

'date' Command

Date command displays current date and time in the terminal.

# date -u

Tue Nov 12 18:19:59 UTC 2019

'cal' Command

Cal command displays the calendar of current month in the terminal.

# cal

# cal 'year' display calendar of that particular year

# cal -m 'month name' display calendar of a particular month of that year

# cal -m 'month name' 'year' display calendar of a particular month of a particular year

'pwd' Command

pwd command displays the full path of present working directory in the terminal.

'cd' Command

cd command is used to navigate through the folders using the terminal.

# cd 'folder name' switches to folder with name folder-name

# cd .. takes you to the absolute path

# cd or cd ~ home directory

# cd - previous working directory

'mkdir' Command

mkdir command is used to navigate through the folders in the terminal.

# mkdir <directory name> to make directory

# mkdir <dir1> <dir2> <dir3> to create multiple directories

# mkdir -p <dir1>/<dir2> to create intermediate directories

'ls' Command

ls is a simple command to list all the files in current directory.

# ls -l show detailed info in columns

# ls -a show the hidden file also

# ls -t sort by last modified date newest first

# ls -S sort by size

# ls -R recursively list the directories with the subdirectories

'cp' Command

cp is a simple command to copy paste the files from one directory to another directory.

# cp <item1> <item2> copies the single file/directory item1 to the file/directory item2

# cp file1 file2 dir1 copy file1 and file2 into directory dir1

# cp dir1/* dir2 using a wildcard, copy all the files in dir1 into dir2

# cp r dir1 dir2 Copy the contents of directory dir1 to directory dir2

'mv' Command

mv is a simple command to move or rename the files, it performs both operations file moving and file renaming

# mv <item1> <item2> Move file1 to file2. If file2 exists, it is overwritten with the contents of file1. If file2 does not exist, it is created.

'rm' Command

rm is a simple command to delete files.

# rm <item> used to remove (delete) files and directories

# rm -r dir1 delete dir1 and its contents.

# rm -r file1 dir1 delete file1 and dir1 and its contents

DEV Community: Amit K.। 🎧

"Function makes the dependencies of useEffect Hook change on every render" warning in React

A contrived example

Dependency arrays and referential equality

How to fix this?

Conclusion

# Basic Linux Commands List

Why Use the Command Line?

What are Flags?

'users' Command

# users

'date' Command

# date -u

'cal' Command

# cal

# cal 'year' display calendar of that particular year

# cal -m 'month name' display calendar of a particular month of that year

# cal -m 'month name' 'year' display calendar of a particular month of a particular year

'pwd' Command

'cd' Command

# cd 'folder name' switches to folder with name folder-name

# cd .. takes you to the absolute path

# cd or cd ~ home directory

# cd - previous working directory

'mkdir' Command

# mkdir <directory name> to make directory

# mkdir <dir1> <dir2> <dir3> to create multiple directories

# mkdir -p <dir1>/<dir2> to create intermediate directories

'ls' Command

# ls -l show detailed info in columns

# ls -a show the hidden file also

# ls -t sort by last modified date newest first

# ls -S sort by size

# ls -R recursively list the directories with the subdirectories

'cp' Command

# cp <item1> <item2> copies the single file/directory item1 to the file/directory item2

# cp file1 file2 dir1 copy file1 and file2 into directory dir1

# cp dir1/* dir2 using a wildcard, copy all the files in dir1 into dir2

# cp r dir1 dir2 Copy the contents of directory dir1 to directory dir2

'mv' Command

# mv <item1> <item2> Move file1 to file2. If file2 exists, it is overwritten with the contents of file1. If file2 does not exist, it is created.

'rm' Command

# rm <item> used to remove (delete) files and directories

# rm -r dir1 delete dir1 and its contents.

# rm -r file1 dir1 delete file1 and dir1 and its contents

# `users`

# `date -u`

# `cal`

# `cal 'year'` display calendar of that particular year

# `cal -m 'month name'` display calendar of a particular month of that year

# `cal -m 'month name' 'year'` display calendar of a particular month of a particular year

# `cd 'folder name'` switches to folder with name folder-name

# `cd ..` takes you to the absolute path

# `cd` or `cd ~` home directory

# `cd -` previous working directory

# `mkdir <directory name>` to make directory

# `mkdir <dir1> <dir2> <dir3>` to create multiple directories

# `mkdir -p <dir1>/<dir2>` to create intermediate directories

# `ls -l` show detailed info in columns

# `ls -a` show the hidden file also

# `ls -t` sort by last modified date newest first

# `ls -S` sort by size

# `ls -R` recursively list the directories with the subdirectories

# `cp <item1> <item2>` copies the single file/directory item1 to the file/directory item2

# `cp file1 file2 dir1` copy file1 and file2 into directory dir1

# `cp dir1/* dir2` using a wildcard, copy all the files in dir1 into dir2

# `cp r dir1 dir2` Copy the contents of directory dir1 to directory dir2

# `mv <item1> <item2>` Move file1 to file2. If file2 exists, it is overwritten with the contents of file1. If file2 does not exist, it is created.

# `rm <item>` used to remove (delete) files and directories

# `rm -r dir1` delete dir1 and its contents.

# `rm -r file1 dir1` delete file1 and dir1 and its contents