React

Hooks

Jonas

Markus

Jørgen

Marie

Hva er Hooks? 🤔

  • En ny React-feature (fra versjon 16.8)

  • Lar deg ha tilstand og sideeffekter i funksjons-komponenter

  • Kjennetegnes ved at funksjonenene 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 ✅

  1. Hooks må brukes på toppnivå
     
  2. 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 🚦

useState 🚦

Toggle tilstand

useState 🚦

Populere en liste

useEffect ⚡️

  • Forteller React at komponenten skal gjøre noe etter en render
     

  • 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 kun ved mount og unmount.

useEffect ⚡️

Trigging av effekter kan utelates.

ℹ️

Denne effekten trigges kun 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;

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>
};
  • Et alternativ til useState
     
  • Brukes gjerne til mer kompleks tilstandslogikk (f.eks. når flere tilstander endres samtidig)
     
  • Minner mye om Redux

useReducer 🧽

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

https://tinyurl.com/hooksWorkshop

React Hooks (JavaZone)

By Markus Rauhut

Made with Slides.com

React Hooks (JavaZone)

Dette er en intro til React Hooks

  • 109

More from Markus Rauhut