Consider eslint rule for hooks: react-hooks/exhaustive-dep as warn instead of error.

[Harshit-frontend]

https://www.loom.com/share/2856a0e771bc45398687e248144c3539

[Harshit-frontend]

Conversation over here can help us in understanding the negative impact of using this as an error.

[yedhink]

@Harshit-frontend _a

Very valid point.

Can you please make a PR for this? Just update the existing rule to warn.

cc: @sangameshsomawar This is the edge case that I was talking about.

[sangameshsomawar]

@yedhink @Harshit-frontend :

I am fine with reverting the change and making the rule a warning.
I also agree that many people started facing issues with the rule.

But as I said earlier, This rule is really helpful, improves performance, and helps us detect many bugs in advance.

Let's understand with the below video,

https://www.loom.com/share/42e7a89f32c141db90db98a7a13c7c85

Code Snippets:

Example 1:

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

import "./styles.css";

function App() {
  const [inputValue, setInputValue] = useState("");
  const onChange = ({ target }) => setInputValue(target.value);
  const render = React.useCallback(
    () => console.log("Unnecessary rendering"),
    []
  );
  useEffect(() => {
    render();
  }, [render]);

  return (
    <div className="App">
      <input value={inputValue} onChange={onChange} />
    </div>
  );
}

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

Example 2:

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

import "./styles.css";

function App() {
  const [inputValue1, setInputValue1] = useState("");
  const onChange1 = React.useCallback(
    ({ target }) => setInputValue1(target.value),
    []
  );

  const [inputValue2, setInputValue2] = useState("");
  const onChange2 = React.useCallback(
    ({ target }) => setInputValue2(target.value),
    []
  );

  const [inputValue3, setInputValue3] = useState("");
  const onChange3 = React.useCallback(
    ({ target }) => setInputValue3(target.value),
    []
  );
  return (
    <div className="App">
      First Name:
      <Input value={inputValue1} onChange={onChange1} name="First Name" />
      <br />
      Middle Name:
      <Input value={inputValue2} onChange={onChange2} name="Middle Name" />
      <br />
      Last Name:
      <Input value={inputValue3} onChange={onChange3} name="Last Name" />
    </div>
  );
}

const Input = React.memo(({ inputValue, onChange, name }) => {
  console.log("rendered ", name);
  return <input value={inputValue} onChange={onChange} />;
});
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

[vishnu-m]

@sangameshsomawar Thanks for the detailed video. I was facing some issues after this rule was added and was going through many resources on the same. This was helpful.

[yedhink]

@sangameshsomawar Thanks for the detailed video.

Agree that this is a useful rule. But the core underlying issue lies in the fact that most of the neeto repos have already got bad code merged into them. These eslint rules and the enforcement started only a few months back in neeto side. Refer.

So let's take this PR in neetoAuth. The person making the changes intended only to make some UI updates. But Eslint flagged a lot of exhaustive-deps offenses because the already existing code had these offenses. So if we had set this rule as error, then it would have been a blocker for the UI person. Currently, as we have set this as warn, and CI is passing.

I agree that it's not the best way to do it. So let's take baby steps inorder to enforce this rule as an error itself.

• First, we need to write a bit about this rule - you have done a great job with the video
• Thus start by adding a new chapter in https://www.bigbinary.com/react-best-practices
• I will assign you an issue in https://github.com/bigbinary/bigbinary-website
• Once you make the PR, you can assign it to me

Let's get that merged. Once it's done, as the next step, let's see whether we can enforce this rule in each repo one by one and how much time will it take. The precursor for doing that is the documentation about useCallback as well as dependency array, both of which we will cover in react-best-practices.

[Harshit-frontend]

Using useCallback hook to a large extent can degrade the performance as it will never free up the memory space.

Check this article