Theo's Typesafe Cult•2y ago

React immutability performance

Hi! Is it possible to avoid calling renderPosts every time when filteredPosts gets mutated? filteredPosts is mutated because state search value changes, but actually the value of filteredPosts (array of objects) did not (in case the search expression is not too specific) Can I handle this mutability in React?

const filteredPosts = useMemo(() => {
  return posts.filter(
    (post) => post.title.includes(search) || post.excerpt?.includes(search)
  );
}, [posts, search]);

const renderPosts = useCallback(() => {
  console.log('renderPosts');

  // return filteredPosts.map ...
}, [filteredPosts]);

const filteredPosts = useMemo(() => {
  return posts.filter(
    (post) => post.title.includes(search) || post.excerpt?.includes(search)
  );
}, [posts, search]);

const renderPosts = useCallback(() => {
  console.log('renderPosts');

  // return filteredPosts.map ...
}, [filteredPosts]);

1 Reply

Tom•2y ago

forgive me if im wrong, but i think renderPosts() shouldnt be called just because filteredPosts is recalculated it should just recreate the function, but not run it if the function is running again, its probably because your rendered components are getting re-rendered and then that is calling renderPosts()

Gaming

Programming

React immutability performance