React part 8

5 min readJun 2, 2021

today we continue with useEffect hook, dependencies with useEffect, and setting up the JSON server to fetch!

OK, to start, we should hop into the Home.js.

It should look like this, and we haven't changed anything since the last post:

lines 31–34 is all we are looking at anyways.

Just a refresher, we use the useEffect hook if we want to fire a function after every re-render(that occurs when entering a sight or when you update state.)

Butttt!!!!! Sometimes you don't always want to continuously fire the useEffect every time it changes in the state. So we can add a dependency array that we pass into the function, and it will fire this function when only a specific state in a hook changes, instead of when all the states change.

Let's start with an empty array like this:

we start with an empty array, and then we shall see how it looks in the browser

If you noticed, the use effect still ran, But I also deleted one of the blogs, and nothing updated/ “use effect ran” didn't fire again. That's because when we have an empty dependency array, it will run just the first time the page gets loaded. Then will not run after that with each change in state.

Now, we can add a dependency to that array which will trigger that useEffect every time the state changes for that specific hook.

Let's start by adding another piece of state like so and a button:

So we start on line 26; we create a new piece of state, with a simple “name” hook, and the initial value is “jonathan bleibdrey”(easy peasy!)

hop down to line 33–36; we run the two console.logs(with the new state “name” and text of “use effect ran”)

on line 36, you see, we added a name inside that array dependency, which now fires that only when the state changes for just the “name” hook, not “blogs” hook.

Lastly, we look at lines 41–45 here; we put an h1 with text(kinda like a divider, that is all), then we add a button tag (call it whatever you want; I choose “change name”). Next, we use an onclick function inside the button to fire when people hit that button. Inside that onClick is an anonymous function that fires setName hook from line 26 with the new name. lastly, on line 45, we have a p tag with a simple name( which outputs just the “name”)

this is what it should look like:

you see, the useEffect ran on the initial render of the page, with also displaying the “name” hook.

Below we delete two of the blogs, and you see nothing happened, no re-render until after I clicked the button.

It finally re-rendered only when I clicked on the button to change the name.

Moving on!

getting started with using JSON server

We would most likely fetch data using the useEffect function because it fires as soon as the page renders.

We will also use that data instead of the information that we set up.

Let's begin!

First, let us make a folder called data in our Root directory, and in there, we will make a file called data.json(must be .json so react reads it correctly). should look like this:

inside there we should put this:

this is an object with a single property called “blogs,” an array of two blog objects. Each blog has a title, body, author, and id.

OK, now open up a new terminal cd into the folder you are working on for the project. and run

npx json-server — — watch data/data.json — — port 8000

should look like this:

all this is saying run the server to watch that database, and it will also give us API endpoints and give us http://localhost:8000/blogs to do things with the data. if you click above, it should look like this:

the rest of it is “— — watch data/data.json” is saying, please watch this file and the path to that file. Then “ — — port 8000” is where we will be running the server(it will automatically run on 3000 if you don't specify but, we already have our website running on that).

Now we will be using this address http://localhost:8000/blogs to make a fetch request to that data.json endpoint!

We will be using GET, POST, and DELETE for this project.

I will link the actual data fetching down below when it's ready.

Thank you hope you learned something and talk soon!

React…

React part 1 (link to How to start a react app)

React part 2 (link to components and dynamic values)

React part 3 (link to Multiple components and small styling)

React part 4 (link to click events with functions and react dev tools)

React part 5 (link to useState hook and how to output lists in react)

React part 6 (Props and reusable components)

React part 7 (passing functions as props and use effect hook)