How to Pass Data Between Screens in a React App

How to Pass Data Between Screens in a React App

Passing data between screens has several patterns. Here is how to choose the right one.

URL Parameters

For data that identifies a screen, like /user/:id, use URL parameters. They make the screen shareable and bookmarkable, and survive reloads.

Query Parameters

For filters, search, and pagination, use query parameters. They are part of the URL and persist across reloads, which is the right behavior for these features.

State on Link

For small one-time data between navigations, use the state prop on Link. It does not survive a reload, so only use it for non-essential transitions.

Shared Store

For data used across many screens, like the logged-in user or a cart, use Context or a state library. Each screen reads from the store instead of passing data around.

Server Fetch

Often the cleanest approach: pass an id in the URL, and the destination screen fetches the full data by id. This avoids passing large data through navigation.

Choose by Persistence

Ask: should this data survive a reload? If yes, use the URL or fetch from a server. If no, state on Link is fine. Persistence dictates the pattern.

The Takeaway

Pass data between screens with URL parameters for identity, query parameters for filters, Link state for one-time transitions, Context or a store for widely-shared data, and a server fetch by id for large data. Persistence dictates the pattern.