React

Hooks: useState()

Agenda

  • Generelt
  • Generelt hooks
    • Hooks regler
  • useState()
    • useState() vs setState()
    • useState() with Array and Objects
  • Custom hooks (tid?)

Generelt

  • Konferanser
    • Javazone
    • NDC
    • React Norway

 

  • Arbeidskrav
    • Individuell
    • 2 ukers
    • git
    • Wiseflow
    • Neste uke! mandag/torsdag(?)

Hooks

Hooks

  • v16.8
  • Tillater å bruke state og andre livssyklus funksjoner
    • innenfor en funksjon basert komponent
  • Tilleggs funksjonalitet til funksjon baserte komponenter

 

  • Mindre, lettere og mer fleksibel kode

https://reactjs.org/docs/hooks-intro.html

Hooks

  • Basic Hooks
    • useState
    • useEffect
    • useContext
  • Additional Hooks
    • useReducer
    • useCallback
    • useMemo
    • useRef
    • useImperativeHandle
    • useLayoutEffect
    • useDebugValue
    • useDeferredValue
    • useTransition
    • useId
  • Library Hooks
    • useSyncExternalStore
    • useInsertionEffect

https://reactjs.org/docs/hooks-reference.html

Hooks regler 

  • Alltid kall på hooks på topp nivå
  • Ikke kall på hooks inni:
    • Conditions
    • Loops/løkker
    • Nestede funksjoner
  • ​​Kun kall på hooks innenfor React Funksjoner (Komponenter)
  • Må importeres fra "React"

 

  • Register

Hooks: useState()

useState()

  • State = Tilstand

 

  • Har en innebygd funksjon som trigger "render()" funksjonen
    • For å oppdatere DOM

 

  • state → Nåværende tilstand (state)
  • setState → Er en funksjon som endrer verdien på tilstanden 
const [state, setState] = useState(initialState);
const [name, setName] = useState("Kari Nordmann");

useState()

class Person extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {name: "Kari Nordmann"};
  }
  
  render() {
    return (
      <div>
        <h1>Hello, {this.state.name}</h1>
      </div>
    );
  }
}
import { useState } from "react";

function Person() {
  const [name, setName] = useState("Kari Nordmann");
  
  return (
    <div>
    	<h1>Hello, {name}</h1>
    </div>
  );
}

useState()

class Person extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "Kari Nordmann",
      year: 1964
    };
    this.changeName = this.changeName.bind(this);
  }
  
  changeName = () => {
    this.setState({name: "Ola Nordmann"});
  }
  
  render() {
    return (
      <div>
        <h1>Hello, {this.state.name}</h1>
        <p>born in {this.state.year}</p>
        <button
          type="button"
          onClick={this.changeName}
        >Change color</button>
      </div>
    );
  }
}
import { useState } from "react";

function Person() {
  const [name, setName] = useState("Kari Nordmann");
  const [year, setYear] = useState(1964);
  
  
  return (
    <>
      <h1>Hello, {name}!</h1>
      <p>Born in {age}<p/>
    
      <button
        type="button"
        onClick={() => setName("Ola Nordmann")}
      >Change name</button>
    </>
  )
}

ALDRI OPPDATER STATE DIREKTE!!!

Demo

  • Basic useState()
  • Array
  • Object

Custom hooks

Custom hooks

  • Gjenbrukbarhet
    • i forhold til  → logikk
  • Custom Hooks starter med "use".
    • For eksempel: useFetch 
import React from 'react';

export const useCounter = () => {
  const [counter, setCounter] = React.useState(0);
  const increment = () => setCounter(counter + 1);
  const decrement = () => setCounter(counter - 1);

  return { counter, increment, decrement };
}

Spørsmål? 

Hooks: useEffect()
  • Hooks: useEffect() !!!
    • useEffect() background
    • useEffect() vs componentdidmount() etc
    • useEffect()
    • Custom hooks (???)

Neste gang