useHistory, Don’t Repeat My Mistakes.

I might have mentioned that I have worked on some apps. Nothing too fancy yet, but I am proud of them. There is one app in particular that I have to look back on now, it was a simple game review app. I stopped working on it because it was living up to my expectations, and it wasn’t broken. It was functional but it wasn’t done correctly?

I learned this by working on a different project, that game I keep talking about. Now without going into too many details of the game, the person helping me was asking why I was using window.location to change the page. My previous experiences led me to believe this would be fine. The way I had it setup so far reinforced the idea that this was okay. Then I tried to pass down some more props.

Now in the same review app I ran into a problem with that location method. I know this because I was using localStorage to persist the name of the person signing in instead of just passing it down as a prop. In this app that was the only thing I was passing down, also if the page refreshed it was guaranteed to show the updates because my backend fetch was done correctly. So in this scenario it was working like I wanted it too but was still bad coding on my part.

Back to Building The Game

It was working as intended until, it came time to pass down props. Now I can’t recall if it worked when first getting to the page, and more calls to change the location deleted the props, but as I’m looking to write code that works all the time, there’s no need to find such a distinction. My collaborator told me it is throwing these errors now because I wasn’t using the history method.

After changing all of the window.location bits to incorporate history instead, I had an app that was running again. This time it did not just appear functional, it actually is. I still have a lot of work to do on this game app, but I can relax knowing I’m doing many things right… probably.

--

--

--

Software engineer kinda

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Webcam stream to ascii art with JavaScript

Using React’s useState Hook

Bonjour World!

A cosy little story of someone’s dream, one app and React Native (part 1)

Snapshot testing for APIs using Postman

Angular Material Custom mat-select with search functionality

ADAMANT JS API supports Lisk

Simple ways to improve code readability

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
Akil Griffiths

Akil Griffiths

Software engineer kinda

More from Medium

Why, Oh Why Was This Added?

Image of a question mark

Something I learned about React and Arrays This Week

React custom Hook to trigger tooltip on ellipsis

The JS canvas editor Pikaso has been around for a year 🎂