In 08_lesson.
clicking add reaction button will cause all <PostsExcerpt> components to be re rendered because in <PostsList> we are using all posts from useGetPostsQuery
const PostsList = () => { const { data: posts, isLoading, isSuccess, isError, error } = useGetPostsQuery('getPosts')
to fix this performance issue we could select only posts.ids from it.
Like this:
const PostsList = () => { const { postsIds, isLoading, isSuccess, isError, error } = useGetPostsQuery('getPosts', { selectFromResult: ({ data, isLoading, isSuccess, isError, error }) => ({ postsIds: data?.ids, isLoading, isSuccess, isError, error, }), })
After this fix only one <PostsExcerpt> component will be re rendered.
Before:
After:
In 08_lesson.
clicking add reaction button will cause all
<PostsExcerpt>components to be re rendered because in<PostsList>we are using all posts from useGetPostsQueryconst PostsList = () => { const { data: posts, isLoading, isSuccess, isError, error } = useGetPostsQuery('getPosts')to fix this performance issue we could select only posts.ids from it.
Like this:
const PostsList = () => { const { postsIds, isLoading, isSuccess, isError, error } = useGetPostsQuery('getPosts', { selectFromResult: ({ data, isLoading, isSuccess, isError, error }) => ({ postsIds: data?.ids, isLoading, isSuccess, isError, error, }), })After this fix only one
<PostsExcerpt>component will be re rendered.Before:
After: