How to avoid re-render in RTK query?

Question

This is my RTK query code for social media website but the problem I found is that when I click like , post a comment , and post a reply to comment , delete , update a particular post , then all the posts are fetched again as only one post is modified and all the posts are re-rendered again may be we can optimize that in frontend but I wanna know if there is a way to solve this problem within the RTK query code :

postSlice.js :

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
const POSTS_URL = "http://localhost:8000/api/posts";

export const postSlice = createApi({
  reducerPath: "postapi",
  baseQuery: fetchBaseQuery({
    baseUrl: "http://localhost:8000/",
    credentials: "include",
  }),
  tagTypes: ["post"],
  endpoints: (builder) => ({
    getAllPosts: builder.query({
      query: () => ({
        url: `${POSTS_URL}`,
        method: "GET",
      }),
      providesTags: ["post"],
    }),
    getSinglePost: builder.query({
      query: (postId) => ({
        url: `${POSTS_URL}/${postId}`,
        method: "GET",
      }),
      providesTags: ["post"],
    }),
    addPost: builder.mutation({
      query: ({ content, image }) => ({
        url: `${POSTS_URL}`,
        method: "POST",
        body: { content, image },
      }),
      invalidatesTags: ["post"],
    }),
    deletePost: builder.mutation({
      query: (postId) => ({
        url: `${POSTS_URL}/${postId}`,
        method: "DELETE",
      }),
      invalidatesTags: ["post"],
    }),
    updatePost: builder.mutation({
      query: ({ postId, content }) => ({
        url: `${POSTS_URL}/${postId}`,
        method: "PUT",
        body: { content },
      }),
      invalidatesTags: ["post"],
    }),
    likePost: builder.mutation({
      query: (postId) => ({
        url: `${POSTS_URL}/${postId}/like`,
        method: "POST",
      }),
      invalidatesTags: ["post"],
    }),
    unlikePost: builder.mutation({
      query: (postId) => ({
        url: `${POSTS_URL}/${postId}/unlike`,
        method: "POST",
      }),
      invalidatesTags: ["post"],
    }),
    commentOnPost: builder.mutation({
      query: ({ postId, comment }) => ({
        url: `${POSTS_URL}/${postId}/comments`,
        method: "POST",
        body: { comment },
      }),
      invalidatesTags: ["post"],
    }),
    replyOnComment: builder.mutation({
      query: ({ postId, commentId, reply }) => ({
        url: `${POSTS_URL}/${postId}/comments/${commentId}/reply`,
        method: "POST",
        body: { reply },
      }),
      invalidatesTags: ["post"],
    }),
  }),
});

export const {
  useAddPostMutation,
  useGetAllPostsQuery,
  useGetSinglePostQuery,
  useDeletePostMutation,
  useUpdatePostMutation,
  useLikePostMutation,
  useUnlikePostMutation,
  useCommentOnPostMutation,
  useReplyOnCommentMutation,
} = postSlice;

Lee Kai Xuan · Accepted Answer · 2023-07-01 17:21:58Z

0

I'm not sure how your APIs are used or how your posts components are structured, but it seems more like a React rendering issue. Assuming you have a Post component for each posts, you could wrap the Post component in a memo React hook, so that the component won't re-render if the component's props don't change.

Posts.js

import { memo } from 'react'

function Post({ post }) {
  ... 
}

export default memo(Post)

answered Jul 1, 2023 at 17:21

Lee Kai Xuan

1697 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to avoid re-render in RTK query?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related