React.js

Recap

  • useState - is a way to retain variable changes in a function
  • useEffect - is a way to react to variable changes and a place to "communicate" with outer world
  • useEffect - has a cleanup function called on every new invocation of the hook

Stale state

function App() {
  const [count, setCount] = React.useState(0);

  function delayAddOne() {
    setTimeout(() => {
      setCount(count + 1); // will point to old "code"
    }, 1000);
  }

  return (
    <>
      <h1>Count: {count}</h1>
      <button onClick={delayAddOne}>+ 1</button>
    </>
  );
}

useState set can accept a function

function App() {
  const [count, setCount] = React.useState(0);

  function delayAddOne() {
    setTimeout(() => {
      // a function gives access to latest previous value
      // you don't need to rely on "code" in a closure
      setCount(prevCount => prevCount + 1); 
    }, 1000);
  }

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={delayAddOne}>+ 1</button>
    </div>
  );
}

Let's build an autocomplete

Resources

https://restcountries.com/v2/name/ukr?fields=name,flags,alpha3Code