component will mount hooks code example
Example 1: how to use componentdidmount in functional component
// passing an empty array as second argument triggers the callback in useEffect
// only after the initial render thus replicating `componentDidMount` lifecycle behaviour
useEffect(() => {
if(!props.fetched) {
props.fetchRules();
}
console.log('mount it!');
}, []);
// componentDidUpdate
useEffect({
your code here
})
// For componentDidUpdate
useEffect(() => {
// Your code here
}, [yourDependency]);
// For componentWillUnmount
useEffect(() => {
// componentWillUnmount
return () => {
// Your code here
}
}, [yourDependency]);
Example 2: replace componentwillmount with hooks
useEffect(() => {
//will be called on every load
})
useEffect(() => {
//will be called on component mount
window.addEventListener('mousemove', () => {});
// returned function will be called on component unmount
return () => {
window.removeEventListener('mousemove', () => {})
}
}, []) // <---- empty array at end will cause to only run on first load
Example 3: component did mount in hooks
For componentDidMount
useEffect(() => {
// Your code here
}, []);
For componentDidUpdate
useEffect(() => {
// Your code here
}, [yourDependency]);
For componentWillUnmount
useEffect(() => {
// componentWillUnmount
return () => {
// Your code here
}
}, [yourDependency]);
Example 4: componentwillunmount hooks
useEffect(() => {
window.addEventListener('mousemove', () => {});
// returned function will be called on component unmount
return () => {
window.removeEventListener('mousemove', () => {})
}
}, [])
Example 5: react hook will mount
const useComponentWillMount = (func: (params?: any) => any) => useMemo(func, []);