optimistic-ui-like-button.js

import React, { useState } from 'react'

const toggleLikeTweet = async (tweetId: number) => {
  // Send a request to API
}

function LikeTweet({ tweetId, tweetIsLiked }) {
  const [isLiked, setIsLiked] = useState(tweetIsLiked)

  useEffect(
    () => {
      setIsLiked(tweetIsLiked)
    },
    [tweetIsLiked]
  )

  const handleClick = async () => {
    // Optimistically toggle like in local state
    setIsLiked(prevIsLiked => !prevIsLiked)

    try {
      // Tell API to toggle like tweet
      await toggleLikeTweet(tweetId)

      // Successfully toggled like API then:
      // Update tweet object or refetch tweets list
    } catch (error) {
      // Request failed so toggle local state again to rollback
      setIsLiked(prevIsLiked => !prevIsLiked)
    }
  }

  return (
    <button onClick={handleClick}>
      {isLiked ? 'Dislike' : 'Like'}
    </buttton>
  )
}