如何编写难以维护的React代码？——滥用useEffect

在许多项目中，我们经常会遇到一些难以维护的React代码。其中一种常见的情况是滥用useEffect钩子，特别是在处理衍生状态时。让我们来看一个例子：

	const ComponentA = ({ list }) => {
	const [filteredList, setFilteredList] = useState(list);
	const [filter, setFilter] = useState({});
	useEffect(() => {
	setFilteredList(_.filter(list, filter));
	}, [filter]);
	/*...*/
	return (
	<>
	{/*...*/}
	<Filter filter={filter} onChange={setFilter} />
	<List data={filteredList} />
	{/*...*/}
	</>
	);
	};

事实上，filteredList 是一个衍生状态，可以通过计算 list 和 filter 得出：list + filter => filteredList。所以可以优化成这样：

	const ComponentB = ({ list }) => {
	const [filter, setFilter] = useState({});
	const filteredList = useMemo(() => _.filter(list, filter), [list, filter]);
	/*...*/
	return (
	<>
	{/*...*/}
	<Filter filter={filter} onChange={setFilter} />
	<List data={filteredList} />
	{/*...*/}
	</>
	);
	};

在改进后的代码中，我们使用了 useMemo 来计算 filteredList，这样可以避免滥用 useState 和 useEffect。通过传入依赖数组 [list, filter]，只有在 list 或 filter 发生变化时，才会重新计算 filteredList，从而优化性能。

减少状态的使用可以有助于降低代码的复杂性，减少潜在的错误。使用 useMemo 可以将计算逻辑从渲染过程中抽离出来，使代码更易于维护和理解。Less States, Less Bugs.

总结：简洁且高效的代码是开发者的追求目标，它不仅有助于减少错误，而且在项目的长期维护中也更容易被团队成员理解与修改。