eslint-plugin-react: Is there an ESLint rule to error/warn to avoid "Mirroring props in state"?
Description*
I would like to know if there is any existing ESLint rule this plugin for preventing mirroring props in state
❌ Do not use a prop as the initial useState() value:
Click to expand!**
const ParentComponent = () => {
const [initialValue, setInitialValue] = useState("Initial value");
useEffect(() => {
setTimeout(() => {
setInitialValue("Changed value");
}, 1000);
}, []);
return <ChildComponent initialValue={initialValue} />;
};
const ChildComponent = ({ initialValue }) => {
const [inputValue, setInputValue] = useState(initialValue);
const handleChange = (e) => {
setInputValue(e.target.value);
};
return <input value={inputValue} onChange={handleChange} />;
};
✅ Use useEffect() instead to fix it:
Click to expand!**
import React, { useState, useEffect } from "react";
const ParentComponent = () => {
const [initialValue, setInitialValue] = useState("Initial value");
useEffect(() => {
setTimeout(() => {
setInitialValue("Changed value");
}, 1000);
}, []);
return <ChildComponent initialValue={initialValue} />;
};
const ChildComponent = ({ initialValue }) => {
const [inputValue, setInputValue] = useState("");
useEffect(() => {
if (initialValue) {
setInputValue(initialValue);
}
}, [initialValue]);
const handleChange = (e) => {
setInputValue(e.target.value);
};
return <input value={inputValue} onChange={handleChange} />;
};
Context
It’s something React Docs (beta) suggests:
https://beta.reactjs.org/learn/choosing-the-state-structure#avoid-redundant-state -> check Deep Dive box
Notes
- *If there is not an existing ESLint rule for this and you think it could have sense I will edit the title and the issue description
- **Thanks to @volodymyrhudyma since I used his awesome article example to illustrate the issue.
About this issue
- Original URL
- State: open
- Created 2 years ago
- Reactions: 2
- Comments: 16 (8 by maintainers)
I’m not really sure.
It’s definitely a good bit of work to make a robust rule for this. It might indeed catch some problem cases, which is great! The error message could include links to the react docs you’ve linked above.
The question that can’t really be answered is whether it’ll come up often enough to be worth it, but I still think it’s worth a PR.
Go for it!
ok, so i can see an argument for a prop value being used as an initial state value, and having that warn.
Such a rule would not just need to detect it with SFCs and hooks, but also with class and createClass components - anything that isn’t using gDSFP.