React

Hooks: useEffect()

Agenda

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

useEffect()

  • Tillater å utføre sideeffekter i en komponent
  • Simulere livssyklusene i en funksjonell komponent
  • Default → Kjører etter hver render
  • Kan spesifisere å trigge basert på endringer i verdi
  • Returnerer en funksjon for å "rydde opp" koden

 

  • 2 Parametere
    • Callback funksjon
    • Array → følger med på verdiene i arrayet
  • Typisk plassert på toppen
  useEffect(() => {
    console.log('effect: ', counterState);
  
    return () => {
      console.log('clean up: ', counterState)
    }
  }, [counterState])

class

  • componentDidMount()
  • componentDidUpdate()
  • componentDidUnmount()

 

  • componentWillMount()
  • componentWillUpdate()
  • componentWillUnmount()

functional

 

 

 

  • useEffect

 

 

 

componentDidMount() {
  console.log('...');
}
  useEffect(() => {
    console.log('...');
  }, [])
// componentDidMount

useEffect(() => {
  // Your code here
}, []);
// componentDidUpdate

useEffect(() => {
  // Your code here
}, [yourDependency]);
useEffect(() => {
  // Your code here
  // componentWillUnmount
  return () => {
    // Your code here
  }
}, [yourDependency]);
import { useEffect, useState } from 'react';

const AgeChecker = () => {
  const [age, setAge] = useState(0);
  const [message, setMessage] = useState('');

  useEffect(() => {
    if (age < 18) {
      setMessage('Ikke myndig');
    } else {
      setMessage('Myndig');
    }
  }, [age])


  return (
    <div>
      <h1>Age: {age}</h1>
      <button onClick={() => setAge(age + 1)}>
        Increment age
      </button>

      <p>{message}</p>
    </div>
  );
}

export default AgeChecker;
// Hver render

useEffect(() => {
  // Your code here
});
// Kun ved mount

useEffect(() => {
  // Your code here
}, []);
// Kun dersom verdien til avhengighetene endrer seg

useEffect(() => {
  // Your code here
}, [yourDependency]);
import { useEffect, useState } from 'react';

const AgeChecker = () => {
  const [age, setAge] = useState(0);
  const [message, setMessage] = useState('');

  useEffect(() => {
    if (age < 18) {
      setMessage('Ikke myndig');
    } else {
      setMessage('Myndig');
      setAge(12)
    }
  }, [age])


  return (
    <div>
      <h1>Age: {age}</h1>
      <button onClick={() => setAge(age + 1)}>
        Increment age
      </button>

      <p>{message}</p>
    </div>
  );
}

export default AgeChecker;

Custom Hooks

Custom hooks

  • Gjenbrukbarhet
    • i forhold til → logikk
  • Custom Hooks starter med "use".
    • For eksempel: useAgeChecker()
import { useEffect, useState } from "react";

const useAgeChecker = (age) => {
  const [ageMessage, setAgeMessage] = useState('');

  useEffect(() => {
    if (age < 18) {
      setAgeMessage('Ikke myndig');
    } else {
      setAgeMessage('Myndig');
    }
  }, [age])

  return ageMessage;
};

export default useAgeChecker;
import useAgeChecker from './useAgeChecker';

const MyComponent = () => {
  const age = 20;

  // Bruk useAgeChecker hooken
  const ageMessage = useAgeChecker(age);

  return (
    <div>
      <p>Alder: {age}</p>
      <p>Status: {ageMessage}</p>
    </div>
  );
}
import { useEffect, useState } from "react";

const useAgeChecker = (age) => {
  const [ageMessage, setAgeMessage] = useState('');

  useEffect(() => {
    if (age < 18) {
      setAgeMessage('Ikke myndig');
    } else {
      setAgeMessage('Myndig');
    }
  }, [age])

  return ageMessage;
};

export default useAgeChecker;
Debugging + Testing
  • Debugging
    • console.log()
    • Lese log i nettleseren
    • Debugger kommando
  • Testing
    • Generelt testing
    • Jest

Neste gang