I have a function based component. I fetch data on redux toolkit with useAppSelector() but as a result I wrote ine clg within component to check what happens. When page renders again still clg renders again and again. My code like this
const blogs = useAppSelector(
(state: RootState) => state.introBlogsSlice.data.results
);
const dispatch = useAppDispatch();
useEffect(() => {
dispatch(fetchSomeBlogs());
}, []);
console.log("blogs", blogs);
I wrote it with useMemor() like this.
const blogs = useAppSelector(
(state: RootState) => state.introBlogsSlice.data.results
);
const data = useMemo(() => {
return blogs;
}, [blogs]);
const dispatch = useAppDispatch();
useEffect(() => {
dispatch(fetchSomeBlogs());
}, []);
console.log("blogs", blogs);
But still it does not work it renders any time when page refresh and regardles of what I do despite there is no any difference in data.
To summorise, How can I write this with useMemor() to block extra renders?