Reactjs 在（筛选的）搜索列表中仅使用一个useState挂钩

在

ArticlePage.js

中，在我当前的设置中，我使用多个

useState（）

钩子来呈现和过滤我的帖子列表：

const [posts, setPosts] = useState([]);
const [filteredPosts, setFilteredPosts] = useState([]);

我在想，重构和优化这段代码，我能不能也只有（而不是上面两个）

我只希望组件重新渲染：

• 如果职位数量发生变化
• 如果在搜索输入中键入值，则更改

我认为我的设置可以退出，但我想知道我是否可以改进它？

我会替换它

const [filteredPosts, setFilteredPosts] = useState([]);

与

移除

  useEffect(() => {
    setFilteredPosts(
      posts.filter((post) => {
        return post.title.toLowerCase().includes(search.toLowerCase());
      })
    );
  }, [search, posts]);

const filteredPosts = useMemo(
    () => posts.filter((post) => post.title.toLowerCase().includes(search.toLowerCase())),
    [search, posts]
);

  useEffect(() => {
    setFilteredPosts(
      posts.filter((post) => {
        return post.title.toLowerCase().includes(search.toLowerCase());
      })
    );
  }, [search, posts]);