Uncontrolled vs Controlled
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
useEffect Hook
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]);
useEffect Hook
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
useRef Hook
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>;
}
Uncontrolled vs Controlled 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
useEffect
By Diego Torres
useEffect
- 448