DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,155 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Michael Chan
Michael Chan

Posted on

Connect useEffect and useState to Update Components with Data

We have one way to update (or re-render) a component.
It's React.useState.

When we want to render our component with data we've useEffected from the internet, we need to need a useState updater function to call.

This is a common pairing of functions where server data is used to update a component:

let [componentData, setComponentData] = React.useState(null);

React.useEffect(() => {
  fetchData().then(serverData => setComponentData(serverData));
})

In our Pokemon app, that looks like this:

let [index, setIndex] = React.useState(1);
let [pokemon, setPokemon] = React.useState(null);

React.useEffect(() => {
  fetchPokemon(index).then(json => setPokemon(json));
});

Our useEffect connects us to the outside world β€”Β fetching data with JavaScript.
The callback we give to fetchPokemon calls our useState updater function when data is ready β€” updating our component.

Give it a try!

Assignment Sandbox:

Assignment:

  1. Update the let pokemon assignment to get it's value from React.useState(null)
  2. Using destructuring assignment, take the second element of React.useState's return (our updater function) and setPokemon
  3. Replace console.log(json) with a call to setPokemon(json)

Follow the 🧡 on Twitter:

Subscribe on YouTube:

Top comments (2)

Collapse
 
thorocaine profile image
Jonathan Peel

How do you feel about putting {index, pokemon} into a reducer, so you only have one "state" object?

Do you think it is too much here because they always update independently?

Collapse
 
chantastic profile image
Michael Chan Author

great question!

You could go either way, depending on your comfort with reducers.

I think the end result would impact my preference.
For example, I don't like having two pieces of state in a reducer that control the same outcome β€”Β index and pokemon.

I think it'd depend a lot of the final component whether I kept index or pokemon in the reducer.

I'll try to flesh that out a little more in the later lessons.

Thanks for asking!

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›