React.js

ui is a state

Types of state

  • URL state
  • Server state
  • Form state
  • Local state
  • App state

URL anatomy

URL state

URL state

Tools that simplify work with URLs are often referred as "routers"

URL state

 <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />}>
        <Route index element={<Home />} />
        <Route path="teams" element={<Teams />}>
          <Route path=":teamId" element={<Team />} />
          <Route path="new" element={<NewTeamForm />} />

URL state

  <Route path="users/:userID" element={<UserProfile />} />

import { useParams } from 'react-router-dom';

function ProfilePage() {
  // Get the userID param from the URL.
  let { userID } = useParams();
  // ...
}

URL state

import { useSearchParams, useNavigate } from "react-router-dom";

function App() {
  let [searchParams, setSearchParams] = useSearchParams();
  let navigate = useNavigate(); // --> navigate("/posts")
  ...

Form state

Form state

Form state

Keeps track of useful metadata for fields and form such as
isDirty, dirtyFields, touchedFields, isSubmitted, isSubmitSuccessful, isSubmitting, isValid, errors, ...

Form state

Server state

Keeps track of useful metadata describing communication with BE resource:
isLoading, error, ...

Also can include caching, normalization, optimistic updates and other advanced techniques

Server state

const { status, data, error, isFetching } = usePosts();

Server state


const getPosts = async () => {
  const { data } = await axios.get(
    "https://jsonplaceholder.typicode.com/posts"
  );
  return data;
};

export default function usePosts() {
  return useQuery("posts", getPosts);
}

Server state

App state

Some data in time that affects the whole application

App state

App state

Resources