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