markusra

Intro til React Hooks – en workshop

Om workshopen

I denne workshopen har vi satt opp et enkelt frontendskall for en chatteapplikasjon. Selve applikasjonen lever på CodeSandbox og kan nåes på denne lenken: https://codesandbox.io/s/5452lx6qo4.

Lokal utvikling

Er du ikke fan av CodeSandbox? Da kan du laste ned prosjektet som zip-fil, kjøre npm install og npm start, og utvikle i din favoritteditor! Trykk "File" og "Export as ZIP", ekspander filen og naviger til mappen.

For å kjøre npm trenger du å ha node installert. Det installerer du fra hjemmesiden deres.

markusra

Fremtidens pakkemanagere 📦

Tenk om du aldri hadde trengt å kjøre npm install igjen! Litt utopisk, tenker du? Foredraget til Kat Marchán viste at dette kan være nærmere virkeligheten enn du tror:

https://twitter.com/jsconfeu/status/1136331627150413824

Den eksperimentelle pakkemanageren tink lar deg bruke pakker fra npm uten at disse faktisk installeres i node_modules. Istedenfor vil den kun inneholde én enkelt fil med hashene til alle filene i pakkene prosjektet bruker. Dette skjer i bakgrunnen og skal korte ned tiden det tar fra du f.eks. oppdaterer et prosjekt til du har det kjørende.

https://github.com/npm/tink

markusra

Custom Hooks

Definition

A custom Hook is a JavaScript function whose name starts with use and that may call other Hooks.

When to use

Custom Hooks can be used when we want to reuse some stateful logic between components.

Important to know

• Your should name your custom Hooks starting with use (need it in order to check if you follow the the rules of Hooks)

markusra

Ho Ho Hooks

From time to time, you create a React component as a function since state is not necessary at that point. In the end, you catch yourself converting your function into an ES6 class anyway. Unfortunately, classes often tend to become complex and make code reuse difficult. Thanks to a new feature proposal called Hooks this may become a matter of the past sooner than you think!

At the time of writing, React Hooks are only available in React 16.7 alpha. They aren't introducing any breaking changes and can easily be used side by side with stateful logic that you have implemented at other places in your application (you just can't use Hooks in ES6 classes). The feature proposal introduces several different types of Hooks (you can even build your own Hooks). This article focuses on two of those: State Hooks and Effect Hooks.

State Hook

Before hooks were introduced, an app that would help Santa keep track of how many gifts he delivered would