Before addressing this question, I was studying the situation where functions enter the dependency array of useEffect.

Typically, when creating a custom hook, the hook receives state values from the component’s props and uses them in the dependency array of useEffect for handling operations

So, what happens when a function is received as a prop? I contemplated this.

Why Functions Are Included in the Dependency Array

Whenever a React component renders, functions are recreated.

September: Initial Setup and Code Analysis

In September 2022, I was tasked with renewing an existing blockchain wallet that had already been deployed on Chrome.

When I first took on this project, I felt completely overwhelmed. The existing project was developed in Vue 2, and I had to modify it. Additionally, since Chrome follows the Manifest policy, I had to study that as well.

The Manifest v3 issue was there from the start, and since I was more familiar with React, I thought about rewriting the whole project from scratch. I attempted it, but I wasn’t confident enough to restructure everything from the ground up.

• React Query efficiently manages data through unique keys, preventing duplicate fetch calls and improving performance.

For example, if you create a fetch function via a custom hook, it will be called each time it’s used, leading to unnecessary calls for the same data.

Query Keys

React Query manages cached queries using query keys, organizing complex objects and long strings as arrays.

Since these keys are serializable, they serve as unique identifiers for the cached data.