ReactJS Notebook

props

defaultProps: shows a value when nothing given

propTypes: string or number, simply the type.

setting a type is required to handling type-based errors.

Header.propTypes = { title: propTypes.string.isRequired }

---

if you need to edit a constant variable after declaration, then declare it as an object or an array

const SomeComponent = () => {
  const params = {
    uri: "https://some.uri",
    price: "5000",
    isSome: false <br>
  };
  params.isSome = true;
  return <>{params.isSome}</>
}
// true

---

Button won’t mount another component with onClick handler

---

useEffect

is with two things, callback and dependency array, callbacks are to be triggered everytime the component mounted (rendered) and/or callbacks will be fired everytime if a dependency array changes.

Theoritical

Misconcsption: The entire app re-renders whenever a state variable changes.

Re-renders only affect the component that owns the state + its descendants (if any).

Each render is a snapshot, like a photo taken by a camera, that shows what the UI should look like, based on the current application state.

Misconception: A component will re-render because its props change.

When a component re-renders, it tries to re-render all descendants, regardless of whether they’re being passed a particular state variable through props or not.

In the real world, many of our components are impure

When a component re-renders, because one of its state variables has been updated, that re-render will cascade all the way down the tree, in order for React to fill in the details of this new sketch, to capture a new snapshot.

Example:

I want to re-render an updated result only, not the whole component wtih its descendants

So I only export that imported component with that syntax:

export default React.memo(TheComponentWhichUpdates);

Fetching Data Basics

import { useEffect, useState } from 'react'

export default function FetchData({ url }) {
  const [isLoading, setIsLoading] = useState(true)
  const [isError, setIsError] = useState(false)
  const [data, setData] = useState()

  useEffect(() => {
    setIsError(false)
    setIsLoading(true)
    setData(undefined)

    fetch(url)
      .then(res => res.json())
      .then(setData)
      .catch(() => setIsLoading(false))
      .finally(() => setIsLoading(false))
  }, [url])

  return isLoading ? (
    <h1>Loading...</h1>
  ) : isError ? (
    <h1>Error</h1>
  ) : (
    <pre>{JSON.stringify(data, null, 2)}</pre>
  )
}