React Hooks: useEffect

Simplifying DOM manipulations, Data fetching and other effects

Use Cases

How Does it Work?

Example Use Cases

// import React Hooks
import React, { useState, useEffect } from 'react';
const Example = () => {
// declare a [state, updateState] = set(initialValue)
const [count, setCount] = useState(0);
useEffect(() => {
// Update document title using the browser API
document.title = `You clicked ${count} times`;
});
// render component
return (
<div>
<p> You clicked {count} times </p>
<button onClick={ () => setCount(count + 1) } >
Click Me!
</button>
</div>
)
}
export default Example;
const [state, setState] = useState([]);  useEffect(() => {
fetch(API_URL) // use JavaScript's fetch method to get data from an API
.then(res => res.json()) // take the API response and turn it into JSON
.then(res => {
setState(res.results); // update the value of state with results array
});
}, []);

Resources

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store