Fully embracing that hook life
When learning React, it's typical to start off by learning class-based components, then get introduced to functional components, and then maybe look at using hooks. This is definitely the path that I took, and part of this was due to the courses I took being a couple years old. I think it's important to fully understand how the old way of creating state works, and in most React jobs, class-based components are still used regularly. Up until recently, I looked at hooks as some alien creature, never truly understanding what was going on. After watching a short video by Jason Lengstorf on Youtube on the subject, I understood the nature of hooks to a much fuller extent. Actually, to be honest, I have only watched the first 30 minutes or so, but it helped me so immensely I was able to start implementing them immediately. I should say, I struggled along the way and had to consult several blog articles on the topics, but after working with them for the day, I don't know how I can go back to the old way of doing things.
I'm fully immersed in building a news page with the New API right now and trying to use hooks as much as I can. It took me a solid 2 hours to figure out how to create a custom hook to dynamically call the API, but once I did, I realized that everything became much simpler. Now, on any page, all I have to do is use that hook, passing in an argument that represents the snippet of the url I want to use. I no longer have to pass state down from one component to the next and set up a component did mount. It's just there whenever I need it. I made a data set that holds these url snippets along with routing information, an icon for the navigation bar, and the name of the topic and call that at whim. I'm reusing components in a way I never have been able to figure out until now. In fact, my app as of now has one page with 3 components that are set depending on what's being called. This app is more dynamic than anything else I've made, and my codebase is going to be a fraction of what it usually is, all the while being much cleaner and easier to read.
In this project, I'm using Material UI as a CSS framework, React Router for routing, and React Pose for animations. Along with hooks, all of these have a pretty hefty learning curve. Material UI uses several built-in hooks that are mainly style-related, and I was able to turn those into custom hooks, as well, and export them into a separate file. There are some hooks built in for React Router that I still haven't figured out how to use; their docs leave a little bit to be desired, in my opinion. I've set my routing up in several different ways in past projects, but I think the way I set it up this time is the cleanest and makes the most sense. I created a constant and I set that up as the component to be rendered in the index.js. The one piece that's causing me the most issues is React Pose. I've been able to implement a couple of features, but there's a lot more I'd like to do with it before I deploy this thing. As it stands right now, it looks pretty good, but I can think of several things to spice it up.
Until tomorrow!
