React part 13

Jonathan Bleibdrey

6 min readJul 13, 2021

TODAY, we talk abour Router’s parameter and useEffect cleanup

Router Paramter:

So we can get parameters from a URL with the Route parameters,

localhost:3000/blogs/2 ←this guy

Its kinda like a variable which we can use later.

First, lets make BlogDetail in src folder, and then fill it with simple data like a console.log to make sure it connects. (allways do this forever and ever, once you figure it is connected then move on — ->)

Dont forget to import it, which i did on line 6 and then we copy and paste another Route componenet just like line 22–24. The route takes a path and that path should be “/blogs/:id” whihc when you go there, it renders <BlogDetail/> component whihc im displaying on line 23. Side note: when we put “blogs/:id” like this, we are able to pass in a argument later on. So we can actually are able to change that route to wherever we pass the id\.

if we check the browser you can see that we go to localhost:3000/blogs/4 and it rendered out blog details-4. Which i will show how we did that in a momment.

Next, how did we grab that id from the URL then? we used a hook like this:

On line 5 we set a variable to id taht equalls the useParams function. That, allows us to grab the route params from the URL. We also destructure the id , we call it id becuase that's what we used in the “Route” in app.js.

Lastly, we use some squirly brackets and pass in id which is how we show id on the browser!

next, we want to add Links to each blog post or element that gets spewed out. Each one will have a div, a link and a blog post id attached. Kinda like soo:

Dont forget to import Link from router dom which i do on line 2!

Basically we are setting that link to go to our new route we created with In App.js. we use some back ticks `/blogs/${blog.id}` do make sure we can interpolate (if you don't know what this is ${} that allows us to pass in data into that string, also know as string interpolation.)

If you go to the browser and click on the links you should be able to go to any blog detail with that specific id.

Okay, moving on I want to cover something off “Routs” right now, which that I forgot to mention in the last lesson…..

Never late then sorry!!!

The useEffect cleanup:

Now, lets quickly go over how to abort fetch calls within a fetch call inside a useEffect!

LETS GOOOOOO!!

OK, If you get this error which most of you will if you quickly switch between links on your navbar or somewhere. Its basically yelling at you becuase you are trying to continue the fetch call in the background while try to switch between the “home” page and “add a blog” too quickly.The state is screaming at you like “NOOOOOOOOO”. The home page is still trying to update the state, while you're trying to go somewhere else in the browser!

So the fix for this is we need to cancel that fetch, if we decide to jump to a different page, plain and simple.

Head into your UseFetch.js and lets start here:

All we need to do is return a function, in the useEffect which we do in line 34(to start off, allways do a console.log(“abort”) allways an forever to make sure things are connected!) it should, run that console.log “abort” twice as you switch fast between links.

Lets chnage some things, like I did above, for the most part we stay inside the useffect hook. On line 9 we add a new variable called abortCont(you can name this whatever). That takes in a “new” AbortController()” function basically giving you the power to cancel things! (Side note: I had to add “window” to mine for it to work in browser…Most of the time you may not need to.)

We can now use this function within a fetch call and use that variable to stop the fetch, line 12:

We are doing all this by adding a second argument in the fetch call, Which are options for the fetch, but looks like a object to me hahah.

There is a signal key with the value of abortCont.signal, that's all there is too it. Now we have the POWER!

We pass that into the function on the bottom then gets returned if the page gets aborted at the last second :

line 34 all we are doing is returning a anonimous function of abortCont.abort() and this will pause the fetch if you veer off the site during a fetch call.

now if you go into a browser and quickly switch between Home and add a new blog, You will no longer get that error from the very beginning, Now in the off occasion you still doo…There is one last step to do.

The .catch function will catch something. it sees a Abort whihc is an Error code, so it see it and still messes up your plans. It also updates the state for an error state and loading state. We are still updating the state, maybe not the data, but with the errors we are!

This is how we work around it, with a lovely If statement whihc says IF there is an AbortError then through a consoleo.log and don't update the state for anything, else setError and setLoading like normal.

That should fix everything.

Ok i like to keep thse in bite size learning because when i started i was overwhelmed. So good luck hopfully you leanred something. Check out my other stuff down below.

React…

React part 1 (How to start a react app)

React part 2 (components and dynamic values)

React part 3 (Multiple components and small styling)

React part 4 (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)

React part 8 (continue with useEffect hook, dependencies with useEffect, and setting up the JSON server to fetch)

React part 9 (Fetching data with JSON)

React part 10 (loading bar and fetch errors)

React part 11(custom hooks)