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

useEffect Hook

useEffect Hook

useRef Hook

useEffect

More from Diego Torres