So, from my last post we know that classes in React are going away and it’s in with the new. React Hooks! I was definitely excited to use them in my projects I’m working on but then I saw something while trying to use fetch…. Hooks don’t use lifecycle methods like the beloved componentDidMount.
What do we do instead? We want to use the latest and greatest of course. (Or to be perfectly candid, I just kept my component class with the note to do more research later). In any case, there is a hook for that! It’s useEffect. So, it would be something like this… (transforming my old code)
Old Code:
...
class Deck extends Component {
state = {
tarotCards: []
}
componentDidMount() {
fetch('http://localhost:3000/cards')
.then(response => response.json())
.then(data => {
this.setState({
tarotCards: data
})
})
}
...
To:
...
export default function Deck() {
const [cards, setCards] = useState({})
async function fetchData() {
const res = await fetch('http://localhost:3000/cards')
const json = await res.json()
setDeck(json)
}
useEffect(() => {
fetchData()
}, [])
}
...
However, it looks like React is coming out with a new component – Suspense.
According to the docs it’s a new experimental component.
[T]hat lets you “wait” for some code to load and declaratively specify a loading state (like a spinner) while we’re waiting
But Suspense isn’t a replacement for fetch! At least, not now. It only works on fetching data with a library that’s already integrated with it. So, all in all not very useful for now. Interesting to see how it changes…
