Progress is Progress is Progress.
Here we are yet again, at the end of week four in my Flatiron journey. It’s still crazy to fathom, that just in an instant, any person really has the capability to change the course of their life through nearly any decision. Whether it be within a career, relationship, move, or anything — the fact remains that one can really take a hold of life and chose to ‘set their own destiny,’ as romantics might say. I think at a core level, I have really still been processing this whole change and it’s this simple realization that I cannot take lightly. Because I truly know that gained knowledge will be so pivotal in almost every area for the rest of my life.
As of today. I have been coding for over 2 and a half months and officially over 1 month in the program. Moving forward, I will capitalize on taking time to work on my own projects that I can be very passionate about. I think that extra reps of coding allow for the best experience when working with new concepts. It’ll also definitely be time to increase my overall presence on social media such as LinkedIn and Twitter so that I can put myself in the right places I need to be when I start the job search, which is going to be pretty soon.
Today’s blog post will be a shorter one, due to the large number of goals I have to get ready for, in this upcoming week.
The Effect Hook (useEffect)
Wait. What is a hook?
The useEffect hook is instrumental when learning ReactJS. But before I go 60–120 MPH. Let me start a little slower, per my last blog post, I described essential why React, as a Javascript library, can be so powerful, useful, and of course, frustrating to learn. From the ReactJS website,
Hooks let you split one component into smaller functions based on what pieces are related (such as setting up a subscription or fetching data).
Working with react components can eventually become confusing and complex, hooks allow for greater accessibility with rendering side effects. Much similar to the DOM Content Loaded command, useEffect allows you to update any component when the hook is called. It allows us to do a side effect whenever our application renders, unless we tell it not to. By this, I mean that useEffect actually can take in another parameter, that once changing the hook will run. So if we ran a function called, displayCats, every time it was called the useEffect hook would run.
useEffect(()=> {
console.log(render)
}, [displayCats]);This helps immensely when trying to fetch data from an API, update specific components after the webpage has already loaded, or start a timer. There are many different ways to use this hook, this is truly only the surface. Here’s a quick cheat sheet from my school:
useEffect Dependencies Cheatsheet
Here’s a quick guide on how to use the second argument of useEffect to control when your side effect code will run:
useEffect(() => {}): No dependencies array- Run the side effect every time our component renders (whenever state or props change)
useEffect(() => {}, []): Empty dependencies array- Run the side effect only the first time our component renders
useEffect(() => {}, [variable1, variable2]): Dependencies array with elements in it- Run the side effect any time the variable(s) change
