React Hooks og Context har ændret tilgangen til tilstandshåndtering og datadeling i React-applikationer. Med introduktionen af hooks i version 16.8 i 2019 fik udviklere mulighed for at anvende tilstand og livscyklusmetoder i funktionelle komponenter, hvilket resulterer i mere kortfattet og læsbar kode.

Context giver derimod en effektiv metode til at dele data mellem komponenter uden brug af prop drilling. Her undersøges det stærke samspil mellem React hooks og Context, og deres samlede potentiale til at forenkle kompleks tilstandshåndtering og muliggøre problemfri dataflow gennem hele komponenttræet.

I de næste kapitler vil vi gennemgå følgende i detaljer:

State hook

useState gør det muligt for en komponent at bevare og genkalde information (f.eks. brugerinput). For eksempel kan en form-komponent anvende state til at gemme inputværdien, mens en billedgalleri-komponent kan bruge state til at holde styr på det valgte billedeindeks.

function Form() {
  const [value, setValue] = useState('');
  // ...
}

Ref hook

useRef giver en komponent mulighed for at bevare information, der ikke påvirker rendering, såsom en DOM-node eller et timeout-ID. I modsætning til state udløser ændringer af en ref ikke en genrendering af komponenten. Refs fungerer som en "nødudgang" fra det typiske React-paradigme og er nyttige ved interaktion med ikke-React-systemer, såsom de indbyggede browser-API'er.

function Form() {
  const inputRef = useRef(null);
  // ...
}

Effekt-hook

useEffect gør det muligt for en komponent at etablere forbindelser og synkronisere med eksterne systemer, herunder interaktion med netværk, manipulation af browserens DOM, håndtering af animationer, integration af widgets udviklet med forskellige UI-biblioteker samt problemfri inkorporering af ikke-React kode.

function Animation({ animationId }) {
  useEffect(() => {
    const animation = createAnimation(animationId);
    animation.start();
    
    // Cleaning up the animation when the component unmounts
    return () => animation.stop();
  }, [animationId]);
  // ...
}

Memo-hook

useMemo forbedrer renderingsydelsen ved at minimere unødvendige beregninger. For eksempel kan vi instruere React i at genbruge en cachet beregning eller undgå gen-rendering, hvis dataene forbliver uændrede siden forrige rendering.

function NewspaperList({ data, filter }) {
  const filteredData = useMemo(
    () => performFiltering(data, filter),
    [data, filter]
  );
  // ...
}

Context-hook

useContext gør det muligt for en komponent at tilgå information fra fjerne forældre uden at skulle videregive props. Det gør det muligt for topniveau-komponenten i appen at videregive det aktuelle UI-tema til alle efterkommere, uanset deres dybde i komponenttræet.

function Section() {
  const theme = useContext(ThemeContext);
  // ...
}