> For the complete documentation index, see [llms.txt](https://docs.rierino.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.rierino.com/design/pro-code/modules/foundations.md).

# Foundations

Core react, redux and router features can be imported directly

## React

The only module where named imports work.

```jsx
import React, { useState, useEffect, useMemo, useCallback, useRef, useContext } from "react";
```

You get the application's own React instance. That is deliberate: it is what lets your component sit inside the platform's contexts and use hooks without the "invalid hook call / two copies of React" class of failures.

The full React 18 surface is available. See the list in Imports & rules.

`react-dom` is not available. You should not need it: render through JSX and let the platform mount your component.

***

## Redux

```jsx
import ReactRedux from "react-redux";
const { useSelector, useDispatch, useStore, batch, shallowEqual } = ReactRedux;
```

Your component already sits inside the application's Redux provider, so these hooks read the real store.

You will rarely need them. Lists and editors already receive `dispatch` as a prop and data access should go through the query hooks in `store` rather than through `useSelector` over raw state.

***

## Router

```jsx
import nextrouter from "next/router";
const useRouter = nextrouter.useRouter;
const Router = nextrouter.default;      // the imperative router singleton
const withRouter = nextrouter.withRouter;
```

Note the shape: `useRouter` is a property and the imperative router is at `.default`.

```jsx
const router = useRouter();

router.query;      // parsed query object
router.asPath;     // "/app/foo/common/bar?id=123"
router.push({ query: { ...router.query, id } });
router.replace({ query: nextQuery }, undefined, { shallow: true });
```

#### Use the router to read, use props to write

The platform already keeps the URL in sync with the selected record: `onSelect` updates `?id=` and `onRoute` writes filters and paging into the query string. Driving navigation yourself on top of that causes the two to fight.

So: read state from the router, write it through the props.

#### Reading the query string reliably

`router.query` can lag behind on shallow updates. The reliable pattern is to parse `asPath`:

```jsx
const [, currentQueryString = ""] = (router.asPath || "").split("?");
const params = new URLSearchParams(currentQueryString);
const activeId = params.get("id");
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.rierino.com/design/pro-code/modules/foundations.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.