Running useEffect in react 18:

[fmanimashaun]

I noticed the code below will not work in React 18 as the component renders twice during the initial rendering. in strict mode

 .addCase(fetchPosts.fulfilled, (state, action) => {
               state.status = 'succeeded'
               // Adding date and reactions
               let min = 1;
               const loadedPosts = action.payload.map(post => {
                   post.date = sub(new Date(), { minutes: min++ }).toISOString();
                   post.reactions = {
                       thumbsUp: 0,
                       wow: 0,
                       heart: 0,
                       rocket: 0,
                       coffee: 0
                   }
                   return post;
               });

               // Add any fetched posts to the array
               state.posts = state.posts.concat(loadedPosts)
           })

[Lam-Big-Water]

// changed
state.posts = loadedPosts

[nathanlao]

In React 18 with strict mode, after component mounts, React immediately simulates unmounting and remounting the component, update react-redux to latest version (compatible with React 18) should solve the problem.