4. 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])   useEffect(() => {
    console.log('effect: ', counterState);
  
    return () => {
      console.log('clean up: ', counterState)
    }
  }, [counterState])   useEffect(() => {
    console.log('effect: ', counterState);
  
    return () => {
      console.log('clean up: ', counterState)
    }
  }, [counterState])   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; 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; 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; 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

React

Agenda

useEffect()

class

functional

Custom Hooks

Custom hooks

Neste gang

4. Hooks: useEffect()

4. Hooks: useEffect()

dawood11

	useEffect(() => {
	console.log('effect: ', counterState);

	return () => {
	console.log('clean up: ', counterState)
	}
	}, [counterState])

	// 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;

	// Kun dersom verdien til avhengighetene endrer seg

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

	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>
	);
	}

React

4. Hooks: useEffect()

More from dawood11