Transition-proof components

React 19 ships View Transitions, which let DOM swaps animate smoothly instead of snapping. Switching between the For You and Following feeds is the perfect candidate. The catch is that a normal state update paints instantly, so you get no animation at all unless you tell React the update is allowed to take its time.

The instant swap

function FeedTabs() {
  const [tab, setTab] = useState('forYou')

  return (
    <>
      {tab === 'forYou' ? <ForYouFeed /> : <FollowingFeed />}
      <button onClick={() => setTab('following')}>Following</button>
      <button onClick={() => setTab('forYou')}>For You</button>
    </>
  )
}

The feeds replace each other in a single frame. No cross fade, no slide, just a hard cut.

The fix

Wrap the update in startTransition. React then treats the swap as a transition and the View Transitions API can animate between the two states.

import { startTransition, useState } from 'react'

function FeedTabs() {
  const [tab, setTab] = useState('forYou')

  const switchTo = (next) =>
    startTransition(() => setTab(next))

  return (
    <>
      {tab === 'forYou' ? <ForYouFeed /> : <FollowingFeed />}
      <button onClick={() => switchTo('following')}>Following</button>
      <button onClick={() => switchTo('forYou')}>For You</button>
    </>
  )
}

Same logic, but now the feeds animate as they change. The component is ready for transitions instead of fighting them.