React Hooks och Context har förändrat hur vi hanterar tillstånd och datadelning i React-applikationer. Med introduktionen av hooks i version 16.8 år 2019 fick utvecklare möjlighet att använda tillstånd och livscykelmetoder i funktionella komponenter, vilket leder till mer koncis och lättläst kod.

Context erbjuder däremot ett effektivt sätt att dela data mellan komponenter utan att behöva prop drilling. Vi kommer att undersöka den kraftfulla synergin mellan React hooks och Context, och visa deras gemensamma potential för att förenkla komplex tillståndshantering och möjliggöra smidig dataflöde genom hela komponentträdet.

I de kommande kapitlen kommer vi att gå igenom följande i detalj:

State-hook

useState möjliggör för en komponent att behålla och återkalla information (t.ex. användarinmatning). Exempelvis kan en formulärkomponent använda state för att spara inmatningsvärdet, medan en bildgallerikomponent kan använda state för att hålla reda på det valda bildindexet.

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

Ref-hook

useRef tillhandahåller ett sätt för en komponent att behålla information som inte påverkar rendering, såsom en DOM-nod eller ett timeout-ID. Till skillnad från state utlöser inte en ändring av en ref en omrendering av komponenten. Refs fungerar som en "nödutgång" från det typiska React-paradigmet och är användbara vid interaktion med system utanför React, såsom inbyggda webbläsar-API:er.

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

Effekt-hook

useEffect möjliggör för en komponent att etablera kopplingar och synkronisera med externa system, inklusive nätverksinteraktion, manipulering av webbläsarens DOM, hantering av animationer, integrering av widgets utvecklade med andra UI-bibliotek samt sömlös inkorporering av icke-React-kod.

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 förbättrar renderingsprestanda genom att minimera onödiga beräkningar. Till exempel kan vi instruera React att återanvända en cachad beräkning eller undvika omrendering om datan är oförändrad sedan föregående rendering.

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

Context-hook

useContext möjliggör för en komponent att få tillgång till information från avlägsna föräldrakomponenter utan att behöva skicka props. Det gör det möjligt för toppnivåkomponenten i applikationen att smidigt vidarebefordra det aktuella UI-temat till alla underordnade komponenter, oavsett deras djup i komponentträdet.

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