A place for notes on React changes I’m keeping an eye on.

22nd Oct 2022 - useEffect and use

So from my understanding there’s a new hook and some changes to useEffect. These are the notes I’ve gathered from various different posts on LinkedIn and Twitter. I’m not very good at keeping up with React proposals on Github; I tend to rely on newsletters and tweets.

Firstly, they’re introducting async in server components. Now from what I’ve gathered over the last couple of years, this has been something that’s been in the works for a while. They’ve mentioned it being in beta. I quite like this and the example below looks pretty neat.

// The current way of doing things

const ExampleComponent = () => {
  const [data, setData] = useState([])

  useEffect(() => {
    fetch('url').then((res) => setData(res.json))
  }, [])
}

return(
  <div>
    {
      data?.map(example => (
        <p>example.name</p>
      ))
    }
  </div>
)

// The new way of doing things

const ExampleComponent = async() => {
  const data = fetch('url').then((res) => res.json)

  return (
    {data.map(example => (
      <p>example.name</p>
    ))}
  )
}

The other thing is a new hook called use. So essentially this can replace await and unwrap the value of a promise. Oh, and it’s the only conditional React hook, the first of it’s kind! So this is very new from what I have gathered. It can be used nested inside conditions, blocks and loops; this means no more splitting the logic up, or potentially React-Query(?!). With use you can set conditions to wait for data to load.

I hear there have been documentation changes to useEffect, I’m yet to read these but this is a small reminder to myself.

If you want to read more about the things mentioned above click here.