Next.js Discord

Discord Forum

How to Check IsMounted?

Answered
Red-legged Kittiwake posted this in #help-forum
Open in Discord
Red-legged KittiwakeOP
const isMounted = useRef(false);
useEffect(() => {
    isMounted.current = true;
    return () => {
      isMounted.current = false;
    };
}, []);
return (
  <>
    {isMounted && (
      <ul className="flex flex-col col-span-2">
        {posts.length > 0 ? (
          <>
            [...]
              if (index === posts.length - 1) {
                  return (
                    <li key={post.id} ref={ref}>
                      <Post
                        post={post}
                        commentAmt={post.comments.length}
                        category={post.category}
                        votesAmt={votesAmt}
                        currentVote={currentVote}
                      />
                    </li>
                  );
                } else {
                  return (
                    <Post
                      key={post.id}
                      post={post}
                      commentAmt={post.comments.length}
                      category={post.category}
                      votesAmt={votesAmt}
                      currentVote={currentVote}
                    />
                  );
                }
              })}
            </>
          ) : (
            <li className="flex justify-center items-center w-full h-[100px] text-muted-foreground">
              <span>{noPostsMessage}</span>
            </li>
          )}
         {isFetchingNextPage && (
            <li className="flex justify-center">
              <Spinner className="w-6 h-6" />
            </li>
          )}
        </ul>
      )}
    </>
  );
Answered by Red-legged Kittiwake
fixed
just had to useState
 const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  }, []);
View full answer

4 Replies

Red-legged KittiwakeOP
the isMounted check doesn't seem to work
the flash of old data is what's bothering me
and it's also causing the hydration error i think
Red-legged KittiwakeOP
fixed
just had to useState
 const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  }, []);
Answer