Controlling when state is loaded, load only on sub-routes

[ysageev]

Hi, I currently have a React app that uses Context to fetch large amounts of async data in certain routes only. The problem with Context is that it updates all state and not slices of state whenever a user changes data that should only reload a part of state.

Different types of users are routed to different landing pages, and I don't want to load the state for, say, BuinessCustomer when RetailCustomer logs in.

I've been reading the docs and I'm still not sure how this is accomplished in Jotai. I have looked at Provider and all it seems to do is designate a separate store.

Thank you!

[dai-shi]

Thanks for opening up a discussion.

Your confusion is understandable. I think it would be nice to establish a certain pattern and it in docs.
So, as you know, a Jotai store is just like a WeakMap, and Provider is just to separate a store.
This means Jotai "core" is designed only for "global" store.

To use it "contextual", I think there are some options:

1. use React Context to pass down an atom.
2. use React Context to pass down the current route.
3. use an atom that tracks the current route (or use atom-in-atom pattern). (This isn't truly contextual.)
4. use jotai-scope

I wonder if anyone else has some experience with it.

[dai-shi]

I mean I'm not super comfortable with current options.
I wish to have a way with better DX.

Any thoughts? Randomly pinning those who might be interested (sorry if it's not the case): @DavidJFelix @dmaskasky @iwoplaza @Pinpickle

[ysageev]

Thank you @dai-shi

Options 1 and 4 seem to be good starting points. I'm reading about scope, molecules, etc, Lot's to understand!

For 1, will using atoms in Context prevent the Context from re-rendering everything when only some atoms change?

[dai-shi]

For 1, the context value is atom itself (a.k.a. atom config object), so it doesn't re-render if atom value changes.

[iwoplaza]

If all you are aiming to do it to fetch data only when you need it, then just using atoms as they are would be sufficient in my opinion.

function App() {
  return (
    <Router>
      <Route path="/home" component={Home} />
      <Route path="/expensive" component={Expensive} />
    </Router>
  );
}

const smallDataAtom = atom(() => fetch('https://example.com/small').then((res) => res.json()));
const expensiveDataAtom = atom(() => fetch('https://example.com/small').then((res) => res.json()));

function Home() {
  const smallData = useAtomValue(smallDataAtom);

  return (
    <Suspense fallback={"Loading..."}>
      <p>Small data: ${smallData}</p>
    </Suspense>
  );
}

function Expensive() {
  const expensiveData = useAtomValue(expensiveDataAtom);

  return (
    <Suspense fallback={"Loading..."}>
      <p>Expensive data: ${expensiveData}</p>
    </Suspense>
  );
}

Each fetch will only happen once per atom and per store (in this case, we are using the default store, so once per atom). smallDataAtom will be computed only when <Home /> is mounted, and expensiveDataAtom will be computed only when <Expensive /> is mounted.

[ysageev]

Thanks both of you for taking the time to answer. My route layout looks more like the following, although I personally am not writing an app with customer components:

const App = () => {
	return (
		<Router>
			<Routes>
				<Route path="/home" component={Home} />
				<Route path="/retailcustomer" component={RetailCustomer} />
				<Route path="/businesscustomer" component={BusinessCustomer} />
			</Routes>
		</Router>
	)
}

const Home = () => <p>Home</p>

const RetailCustomer = () => {
	return (
		<RetailCustomerProvider>
			<Routes>
				<Route path="/" element={<Purchases />} />
				<Route path="/wishlist/" element={<Wishlist />} />
				<Route path="/cart/" element={<ShoppingCart />} />
				Etc...
			</Routes>
		</RetailCustomerProvider>
	)
}


const BusinessCustomer = () => {
	return (
		<BusinessCustomerProvider>
			<Routes>
				<Route path="/" element={<Purchases />} />
				<Route path="/inventory/" element={<Inventory />} />
				<Route path="/suppliers/" element={<Suppliers />} />
				Etc...
			</Routes>
		</BusinessCustomerProvider>
	)
}

const Inventory = () => {
	const { data1, data2 } = useBusinessContext()
	return <p>Inventory using lots of data from context and mutating it</p>
}

// [Purchases and Suppliers components go here]

The provider.js files look like

const BusinessCustomerContext = createContext(null)

const BusinessCustomerProvider = ({ children }) => {
	const value = {
		//complicated state with useEffect, fetching, exported setter functions
	}

	return <BusinessCustomerProvider.Provider value={value}>{children}</BusinessCustomerProvider.Provider>
}

export default React.memo(BusinessCustomerProvider)

export const useBusinessCustomerContext = () => {
	return useContext(BusinessCustomerContext)
}


// [Same thing with RetailCustomerProvider

Some things I'd like:

1. All the subroutes unfortunately need access to the data in the provider, otherwise the state would not have been hoisted in the first place
2. Data should only be loaded for a provider when the appropriate user logs in.
3. All context should be encapsulated in it's own file.
4. Subroutes are not to create atoms that are needed in sibling routes

For all of it's flaws, React Context has some things going for it:

1. It is easy to read and understand
2. It is easy to understand when it is loaded and to what routes it applies

That being said, I do like the granularity, flexibility and ideas of Jotai.

[iwoplaza]

I see, thank you for providing a greater context.

All the subroutes unfortunately need access to the data in the provider, otherwise the state would not have been hoisted in the first place

An atom's value is shared between all components that use it (unless you use separate stores, or something like jotai-scope or bunshi). This is the default behavior, and makes it a drop-in replacement of React Context for these use-cases.

Data should only be loaded for a provider when the appropriate user logs in.

If an atom's value is computed (meaning a function is passed in as the argument to atom() instead of a direct value), then the value is computed on first-use. We can conditionally use these atoms based on if the user is logged in or not

// An atom that resolves to undefined, and setting it does nothing.
const noopAtom = atom(() => undefined, () => {});

function useSomeBusinessValue() {
  const isLoggedIn = ...; // e.g. a call to a hook
  
  return useAtomValue(isLoggedIn ? someBusinessValueAtom : noopAtom);
}

All context should be encapsulated in it's own file.
Subroutes are not to create atoms that are needed in sibling routes

You can define all atoms in a single file, or in multiple files. They do not have to be colocated with the components that use them.

[ysageev]

Ok, Thanks for the help. 🙏