The DOM is the owner of the data and give it to React through event handlers
React is the owner of the data and tell the DOM where to show it
React recommend to use controlled components
Run the callBackFn:
1. Only the first time the component in rendered.
2. Every time the component is rendered.
3. The first time the component is rendered **AND** when something(s) change
useEffect(callBackFn, ["dependecy", "array"]);
useEffect(callBackFn, []);
useEffect(callBackFn);
useEffect(callBackFn, [dependency1, dependency2]);
The callBackFn:
1. Must only return 'nothing' OR 'a clean up function'
2. The clean up function is called before each re-render of the component
useEffect(callBackFn, ["dependecy", "array"]);
const [myData, setMyData] = useState([]);
useEffect(() => {
const fetchInitialData = async () => {
const response = await fetch("url");
const data = await response.json();
setMyData(data);
}
fetchInitialData();
}, []);
Example, the callBackFn fetch Initial Data only the first time the component is rendered
Allow us to store a reference of a DOM or a React
Element.
From here, we can access that div at any moment through myNodeRef.current
function someComponent() {
const myNodeRef = useRef();
return <div ref={myNodeRef}>...</div>;
}