Skip to main content


The useFlashSession hook reads session data and subsequently clears it in server components.

Example code

import {Form, useFlashSession} from '@shopify/hydrogen/experimental';

export default function Login() {
const loginError = useFlashSession('loginError');

return (
<Form action="/login">
{loginError ? <div>Invalid user!</div> : null}
<input type="text" name="username" />
<input type="password" name="password" />
<button type="submit">Login</button>

export async function api(request, {session}) {
const data = await request.formData();
const username = data.get('username');
const password = data.get('password');

const userId = await getUser(username, password);

if (!userId) {
await session.set('loginError', 'INVALID_USER');
return new Request('/login');
} else {
await session.set('userId', userId);
return new Request('/account');

Return value

The useFlashSession hook returns data from the session. It also clears that data so that it will be gone the next time that it's read.


The useFlashSession hook is best used for form validation in the Form component.