Can google crawl pages loaded by useState in React?

Question

I have a blog page that has a 'Load More' button that shows more posts via a useState counter in React. Will Google still be able to crawl/know those pages exist if they're not loaded until the button is clicked? Here's my code (classes and props removed to help your eyeballs):

const Index = ({ allPosts }) => {
  const [displayed, setDisplayed] = useState(12)

 // shows additional posts in incriments of 12
  function handleDisplayed() {
    if (displayed < Object.keys(allPosts).length) {
      setDisplayed(displayed + 12)
    } else setDisplayed(Object.keys(allPosts).length)
  }

  //sets how many posts should be shown at the top as cards
  const featuredPostNo = 4 
  const morePosts = allPosts.slice(featuredPostNo, displayed)

  const getFeaturedPosts = () => {
    return allPosts.slice(0, featuredPostNo).map((post, index) => {
      return (
        <Recipes_FeaturedPost
          aLotOfProps={...more}
        />
      )
    })
  }

  return (
    <div>
        <div>
          <H2>Recent</H2>
          <div>
            {getFeaturedPosts()}
          </div>
        </div>
        <div>
          {morePosts.length > 0 && <MoreStories posts={morePosts} />}
        </div>
        <div>
          <button
            onClick={() => handleDisplayed()}>
                Load More
          </button>
        </div>
    </div>
  )
}

export default Index

export function getStaticProps() {
  const allPosts = postFilePaths
    .map((filePath) => {
      const source = fs.readFileSync(path.join(POSTS_PATH, filePath))
      const { content, data } = matter(source)

      return {
        content,
        data,
        filePath,
      }
    })
    .sort((post1, post2) => (post1.data.date > post2.data.date ? -1 : 1))

  return { props: { allPosts } }
}

Answer 1

Googlebot doesn't click anything or otherwise simulate user interaction with the page. Google renders content that show up after letting JavaScript run for a few seconds after the page loads, but it doesn't see any content that requires a click to show.

If you want Google to index content, you need to assign that content to a URL and have the content show up when the URL loads. In other words, rather than using a <button> with an onclick event you should be using a <Link> that assigns a new URL to the additional posts like (?page=2). Then Googlebot will find the additional URL in the document object model (DOM) attached to the link, append the URL to its crawl queue, eventually crawl that URL, and discover the content.