The data layer manages an application's data and state flow. In a React stack, it is distinct from the API layer, which handles fetching, and the UI layer, which handles presentation. A data layer may combine technologies: zustand, Immer, and XState can serve different parts of one application. section 1.5.2
Locally, data management means storing, reading, and changing data as someone uses the application. That includes whether a menu is open, values entered into a form, editable application objects, and read-only content. useState, useReducer, and React context are available before adding a library. As an application grows, a deliberate structure can be easier to maintain than scattered state hooks; convenience and a team's preferred approach may also favor a library. Redux remains a prominent option, not an automatic requirement. section 8.0
A useful boundary keeps presentation components separate from the data implementation. The main App component can wrap the presentation layer in a data provider, while custom hooks expose only the operations each component needs. This lets the data layer change without requiring the presentation components to change in step. section 8.2
Figure 8.4 The interactions between the presentation layer and the data layer happen in five components, using four custom hooks. The component that displays all things uses the useAllThings hook. The component that allows the user to add a thing uses the useAddThing hook. Both the component that displays a single thing and the component that displays a thing in a list use the useThing hook. Finally, the overall component that displays either a list or a single thing uses the useCurrentThing hook.
The diagram maps five presentation components to four hooks: useCurrentThing selects the view, useAllThings supplies the list, useAddThing adds an item, and useThing serves both list and detail components. section 8.2
Moving data to a server changes the work behind that boundary. A mutation may be rejected, and another user may have changed the data, so an updated view must request fresh server data. That can mean an additional request and more latency. The primary hooks and global context can remain, but their implementations change; separate list-item and detail-item hooks, plus authentication hooks, may also be needed. section 9.2.3
Make a static expense tracker functional
A frontend-only Remix expense tracker has pages and UI components, but its data is dummy data and cannot be changed. Building its data layer means adding the missing data structure, ORM wrappers, loaders, and actions. When starting from the smaller skeleton instead, establish the pages and routes before adding the data layer. section 12.1.1 section 12.2
