Revalidation

Loading "Revalidation"
πŸ‘¨β€πŸ’Ό You might notice that once we make a change to the ship name, the list on the left doesn't update immediately. We are actually sending the updated UI so what's the problem?
The problem is we're ignoring the RSC payload. We're only doing something with the returnValue. Instead, we need to use the root as well to update our component to use that value.
But here's the tricky thing. The callServer function is outside our component so how can we call setContentKey within our startTransition?
We use fancy JavaScript tricks of course! Here's an example of what I mean:
function increment() {
	throw new Error('This was called before Counter rendered')
}

function Counter() {
	const [count, setCount] = useState(0)

	useEffect(() => {
		increment = () => setCount(c => c + 1)
	}, [])

	return <button onClick={increment}>{count}</button>
}
With this setup, you can call increment from anywhere in your code and it will update the Counter component. This is because we're using a closure to keep the setCount function around.
This totally breaks reusability of the component, but in our case we only have a single Root component anyway, so it's perfectly safe.
Another challenge we're going to have in this bit is we need to only update the cached value after the response has finished streaming, otherwise we'll just render the pending UI right away which would be annoying.
You might think about doing something like this:
const actionResponse = await createFromFetch(fetchPromise)
contentCache.set(contentKey, actionResponse)
updateContentKey(contentKey)
return actionResponse.returnValue
Unfortunately, this won't work because the promise resolves as soon as the stream starts not when it ends. So we need something a little more fancy:
function onStreamFinished(fetchPromise, onFinished) {
	// create a promise chain that resolves when the stream is completely consumed
	return (
		fetchPromise
			// clone the response so createFromFetch can use it (otherwise we lock the reader)
			// and wait for the text to be consumed so we know the stream is finished
			.then(response => response.clone().text())
			.then(onFinished)
	)
}
Basically, we're cloning the response so we can read the text from it without locking the reader (otherwise we'd prevent createFromFetch from using it). This way we can know when the stream is finished and update:
const fetchPromise = fetch(/*...*/)
onStreamFinished(fetchPromise, () => {
	updateContentKey(contentKey)
})
const actionResponsePromise = createFromFetch(fetchPromise)
// ... etc
It's important that you call onStreamFinished before calling createFromFetch so we can make a copy of the response before createFromFetch starts consuming it.
So yeah, doing a couple interesting things in this one, but it should result in a great user experience! Enjoy!
Login to get access to the exclusive discord channel.
  • General
    AI Assistant?
    John πŸš€:
    Kent has mentioned an AI assistant that he's using in VSCode. Is there any detail on what that is an...
    • βœ…2
    2 Β· 21 days ago
  • General
    βš›οΈFundamentals
    Error boundary good practice
    Lloren πŸš€:
    I have always wondered if the error boundary is there a limit of error boundary that you can impleme...
    • βœ…1
    1 Β· a month ago
  • General
    Script to save playground folder
    larissapissurno πŸš€:
    Hi all, I personally like to take notes on the playground files, so in order to not lose this notes ...
    • βœ…1
    2 Β· 23 days ago
  • General
    Launch editor error: Could not open 'index.html' from:'playground' in the editor.
    Japhet πŸš€ πŸ†:
    I'm encountering an issue when trying to open a link from the file list. The error message I receive...
    • βœ…1
    15 Β· a month ago
  • General
    Runninng Learning app on iPad?
    marcus_polonus πŸš€:
    Hi all, Did anyone managed to setup learning app on iPad? I tried to use codesandbox, but when I am...
    • βœ…1
    1 Β· 24 days ago
  • General
    Welcome to EpicReact.dev! Say Hello πŸ‘‹
    Kent C. Dodds β—† πŸš€πŸ†πŸŒŒ:
    Welcome to the first of many posts in the EpicReact.dev channel! Take a moment to introduce yourself...
    • πŸš€5
    46 Β· 14 days ago
  • General
    Received this error when running the setup script for React Fundamentals
    ChrisP πŸš€:
    Hey guys, I am completely blocked at the moment. When I clone and run the setup for react fundamenta...
    • βœ…1
    2 Β· a month ago
  • General
    Unexpected server error (workshop-app does not load onboarding step)
    Matias 🌌 πŸš€:
    Hey! πŸ‘‹ I installed the free workshop "Build React Hooks" last week with no issues. Yesterday, whe...
    • βœ…1
    3 Β· a month ago
  • General
    Eye opening moment in 05/06 (β€žsatisfiesβ€œ operator of typescript)
    Chrigi πŸš€:
    Up until today I was not aware that having the type annotation on a variable is actually a type-cast...
    • πŸ™Œ2
    • βœ…1
    2 Β· a month ago
  • General
    Launch editor error: spawn code ENOENT
    Andrew Elans 🌌 πŸš€:
    Clicking index.html gives this error in VS Code. Both from Chrome and Safari. Anyone?
    • βœ…2
    4 Β· 2 months ago
  • General
    Failed to fetch dynamically imported module...
    FacuPerezM:
    I am getting this error out of nowhere, in the 'test' tab inside the Workshop app. ``` Failed to f...
    • βœ…1
    3 Β· a month ago
  • General
    Epicshop not saving the video resolution
    Toni πŸš€ 🌌:
    Playback speed and caption settings are saved, but the video resolution always defaults to auto. Is ...
    • βœ…1
    7 Β· a month ago
  • General
    Clicking an exercise file launch VIM instead of VS Code
    DBattou πŸš€:
    I started going through the workshops, everything is setup and working fine except for opening a fil...
    • βœ…1
    2 Β· a month ago