More hooks and routing

useContext, useRef, custom hooks and React Router.

HookUse it for
useContextSharing data such as the signed-in user without passing props through every level
useRefHolding a value that does not redraw the page, or pointing to an element
useMemoKeeping the result of a slow calculation
Custom hookA use... function that shares logic between components

Pages with React Router

React (JSX)
import { BrowserRouter, Link, Route, Routes } from "react-router-dom";

export default function App() {
  return (
    <BrowserRouter>
      <nav><Link to="/">Home</Link> <Link to="/jobs">Jobs</Link></nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/jobs" element={<Jobs />} />
      </Routes>
    </BrowserRouter>
  );
}
โ† Effects and loading dataReact quick reference โ†’