React · Middle · Question 51 of 75

What is wrong with this effect?

const [filtered, setFiltered] = useState([]);
useEffect(() => {
  setFiltered(items.filter((i) => i.visible));
}, [items]);

✓Correct answer: It stores derived data in state; computing it during render is simpler and avoids an extra render
2useEffect can't call setState
3items must not be a dependency

Explanation

The effect renders once with stale filtered, then again with the new value. const filtered = items.filter(...) (with useMemo if expensive) is always in sync.

What is wrong with this effect?

Explanation

Further reading

Problem with a question

Test yourself