componentdidupdate react hooks code example
Example 1: componentdidupdate in hooks
const App = props => {
const didMountRef = useRef(false)
useEffect(() => {
if (didMountRef.current) {
doStuff()
} else didMountRef.current = true
}
}Example 2: useeffect react
useEffect(() => {
window.addEventListener('mousemove', () => {});
// returned function will be called on component unmount
return () => {
window.removeEventListener('mousemove', () => {})
}
}, [])Example 3: react useEffect
import React, { useEffect } from 'react';
export const App: React.FC = () => {
useEffect(() => {
}, [/*Here can enter some value to call again the content inside useEffect*/])
return (
Use Effect!
);
}Example 4: useeffect componentdidmount
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
// Similar to componentDidMount and componentDidUpdate:
useEffect(() => {
// Update the document title using the browser API
document.title = `You clicked ${count} times`;
});
);
}Example 5: component did update hooks
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
// Similar to componentDidMount and componentDidUpdate:
useEffect(() => {
// Update the document title using the browser API
document.title = `You clicked ${count} times`;
},[count]); // use dependency array to watch for state changes on this part of state
return (
You clicked {count} times
);
}Example 6: useEffect
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
// Similar to componentDidMount and componentDidUpdate: useEffect(() => { // Update the document title using the browser API document.title = `You clicked ${count} times`; });
return (
You clicked {count} times
);
}