rules of hooks

• only call hooks from a React component function

  • from built-in hook call or custom hook

    

• only call hooks at the top level

  • must call hooks before return statement, outside of loops, conditions, or nested functions

    

• you can call multiple state or effect hooks

  • there can be multiple hook calls as long as they are in the same order

  • cannot place hook calls inside conditionals → might result in a hook being skipped when compared with previous render

  • compiles and runs with expected output but clicking button results in invalid hook call error

    

• always make multiple hook calls in the same sequence

  • conditions for hooks have to be placed inside them

    

the fetch() function

• Fetch is used to make a server request to retrieve JSON data from it

• Fetch API - set of functionalities to use in JS to make server requests

• JavaScript Process → single-threaded execution (each step begins after previous step finishes)

  

• Asynchronous JavaScript → delegation of duties

  • Browser: post office
  • JavaScript: one clerk that manages customers
  • Browser/Web APIs: all other clerks that are called to perform duties for each individual customer
  • When JavaScript uses the fetch function it is delegating duties to an external API so that it can continue its process.
    • Fetch() Function: action of JS post office clerk calling the records dept. of the post office to get data about a customer, then the records dept. clerk gets back with the information and hands it over to the post office clerk, the post office clerk then proceeds with data
    • Fetch() function is a facade function → looks like it is part of JS but is a way to call Browser API from JS → way to access Browser functionality outside of JS

  

fetch() in action

index.html

script.js

1. performs console.log(”Another…”)
2. contacts Fetch API (Browser API that is external and separate from JavaScript)
   1. rather than waiting for the Fetch API to return the information, it keeps on executing the code that comes after
3. performs console.log(”Our valued…”)
   1. in the meantime, Fetch API requests data from randomuser.me (third party web based API)
   2. randomuser.me sends data in JSON format
4. performs console.log(data)

fetching data via hooks

• fetching data from a third-party API is considered a side-effect → need to use useEffect for Fetch API calls in React

• ex. component that fetches data from an external API to display information about a cryptocurrency

  • pass an anonymous function (containing data fetching code) as a call to the useEffect hook

    import { useState, useEffect } from "react"; 
     
    export default function App() { 
      const [btcData, setBtcData] = useState({}); 
      useEffect(() => { 
        fetch(`https://api.coindesk.com/v1/bpi/currentprice.json`) 
          .then((response) => response.json()) 
          .then((jsonData) => setBtcData(jsonData.bpi.USD)) 
          .catch((error) => console.log(error)); 
      }, []); 
     
      return ( 
        <> 
          <h1>Current BTC/USD data</h1> 
          <p>Code: {btcData.code}</p> 
          <p>Symbol: {btcData.symbol}</p> 
          <p>Rate: {btcData.rate}</p> 
          <p>Description: {btcData.description}</p> 
          <p>Rate Float: {btcData.rate_float}</p> 
        </> 
      ); 
    } 
    

  • or extract the anonymous function into a separate function expression or function declaration, and then just reference it

    import { useState, useEffect } from "react"; 
     
    export default function App() { 
      const [btcData, setBtcData] = useState({}); 
     
      const fetchData = () => { 
        fetch(`https://api.coindesk.com/v1/bpi/currentprice.json`) 
          .then((response) => response.json()) 
          .then((jsonData) => setBtcData(jsonData.bpi.USD)) 
          .catch((error) => console.log(error)); 
      }; 
     
      useEffect(() => { 
        fetchData(); 
      }, []); 
     
      return ( 
        <> 
          <h1>Current BTC/USD data</h1> 
          <p>Code: {btcData.code}</p> 
          <p>Symbol: {btcData.symbol}</p> 
          <p>Rate: {btcData.rate}</p> 
          <p>Description: {btcData.description}</p> 
          <p>Rate Float: {btcData.rate_float}</p> 
        </> 
      ); 
    } 
    

• the response from fetching third-party data might fail, or be delayed → provide different renders based on whether or not the data has been received

  • ex. set up two renders, based on whether or not the data has been successfully fetched

    return someStateVariable.length > 0 ? ( 
        <div> 
          <h1>Data returned:</h1> 
          <h2>{someStateVariable.results[0].price}</h2> 
        </div> 
      ) : ( 
        <h1>Data pending...</h1> 
      ); 
    

fetch() + useEffect hook in action