React

Hooks

Hva er Hooks? 🤔

En ganske ny React-feature (introdusert i versjon 16.8)
Lar oss bruke tilstand og sideeffekter i funksjons-komponenter
Kjennetegnes ved at funksjonene har "use" som prefix

accessory accompaniment accoutrement action add-on adopt adjunct adornment affix anchor annex appendage aspect atom attachment augmentation augmenter auxiliary behavior binding bolt bookmark capacity cell characteristic charm chip codon complement complication conduit decoration decorator effect enhancement enhancer expander expansion extender extension extra facet factor feature fixin flourish forwarder function trait gene handle holder implant inflater inlet layer ligature line link meme mixin modifier modulator module outlet particle pin pinlet plugin reagent receptacle recipe sauce seasoning segment skeleton slot smooshin staple supplement tack tie tool trait unit utility

Hvorfor Hooks? 🤔

Gjør det enklere å gjenbruke tilstandslogikk på tvers av komponenter
Ingen kompliserte livssyklusmetoder (som componentDidUpdate)
Ingen binding av "this"
Ingen breaking changes (kan trygt brukes parallelt med eksisterende kode)
Slipper konvertering av funksjonskomponenter til klassekomponenter

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
    this.onButtonClick = this.onButtonClick.bind(this);
  }

  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }

  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }

  onButtonClick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={this.onButtonClick}>Click me</button>
      </div>
    );
  }
}

const App = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  function onButtonClick() {
    setCount(prevState => prevState + 1);
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={onButtonClick}>Click me</button>
    </div>
  );
};

Grunnleggende Hooks 🤓

useState
useEffect
useContext

Grunnleggende Hooks 🤓

useState ✅
useEffect ✅
useContext ✅

Ytterligere Hooks 🤯

useReducer
useRef
useCallback
useMemo
useImperativeHandle
useLayoutEffect
useDebugValue

Du kan også lage egne Hooks (såkalte Custom Hooks
som samler flere Hooks).

Ytterligere Hooks 🤯

useReducer ✅
useRef ✅
useCallback ⛔️
useMemo ⛔️
useImperativeHandle ⛔️
useLayoutEffect ⛔️
useDebugValue ⛔️

Du kan også lage egne Hooks (såkalte Custom Hooks ✅ som samler flere Hooks).

To fundamentale regler ✅

Hooks må brukes på toppnivå
Må kun brukes i funksjonskomponenter og i
Custom Hooks

ℹ️

Bruk ESLint og installer eslint-plugin-react-hooks (denne utvidelsen sørger for at du ikke bryter disse to reglene).

useState 🚦

Brukes til tilstandslogikk

useState 🚦

Brukes til tilstandslogikk

import React, { useState } from 'react';

useState 🚦

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

useState 🚦

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useState 🚦

Toggle tilstand

useState 🚦

Populere en liste

useEffect ⚡️

Brukes til sideeffekter (f.eks. nettverkskall, endre DOMen etc.)
Erstatter livssyklusmetodene componentDidMount, componentDidUpdate og componentWillUnmount

useEffect ⚡️

componentDidMount() {
  document.title = `You clicked ${this.state.count} times`;
}

componentDidUpdate() {
  document.title = `You clicked ${this.state.count} times`;
}

useEffect ⚡️

useEffect(() => {
  document.title = `You clicked ${count} times`;
});

componentDidMount() {
  document.title = `You clicked ${this.state.count} times`;
}

componentDidUpdate() {
  document.title = `You clicked ${this.state.count} times`;
}

useEffect ⚡️

useEffect(() => {
  NewsAPI.subscribeToNewsFeed(props.feed.id);
  
  return () => {
    NewsAPI.unsubscribeFromNewsFeed(props.feed.id);
  };
});

Noen effekter krever at du rydder opp etter deg.

useEffect ⚡️

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, []);

Trigging av effekter kan utelates.

ℹ️

Denne effekten trigges ved mount og unmount.

useEffect ⚡️

Trigging av effekter kan utelates.

ℹ️

Denne effekten trigges ved mount og unmount.

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]);

ℹ️

Denne effekten trigges kun når count endrer seg.

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, []);

useEffect ⚡️

Custom Hooks 🏗

useContext ⚙️

import React, { createContext } from "react";

export const LanguageContext = createContext();

const LanguageProvider = props => (
  <LanguageContext.Provider value="no">
    {props.children}
  </LanguageContext.Provider>
);
  
export default LanguageProvider;

import React, { useContext } from "react";
import LanguageContext from "./LanguageContext";

export default const Component = props => {
  const context = useContext(LanguageContext);
  return <div>{ context }</div>
};

useContext ⚙️

import React, { createContext } from "react";

export const LanguageContext = createContext();

const LanguageProvider = props => (
  <LanguageContext.Provider value="no">
    {props.children}
  </LanguageContext.Provider>
);
  
export default LanguageProvider;

Brukes gjerne til mer kompleks tilstandslogikk (f.eks. når flere tilstander endres samtidig)

Minner veldig mye om Redux

useReducer 🧽

import React, { useReducer } from "react";

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter({initialState}) {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </>
  );
}

Legg til CodeSandbox her

tinyurl.com/hooksWorkshop