In Part 12 of this series, we went over how to fetch an individual post by passing in a post’s id to a GET request. We covered how to render a single post to the UI upon entering a post id in an input field, as well as on a button click.

Here in Part 13, we will learn about a new React Hook, the Context Hook- useContext. We’ll go over what exactly context is in React, and then take a look at an example of how to use the useContext Hook.

Intro

Per the React docs, context “provides a…


In Pat 11 of this series, we went over how to fetch data using the State and Effect Hooks. Specifically, we used a JSONPlaceholder endpoint and learned how to render all of the post titles to the UI.

Here in Part 12, we’ll learn how to fetch an individual post by passing in a post’s id to the GET request. And we’ll go over how to render a single post to the UI upon entering a post id in an input field, as well as on a button click.

Getting Started

Let’s go back to JSONPlaceholder (https://jsonplaceholder.typicode.com/) and scroll down…


I wanted to take a break from Hooks to provide a high level overview of Big O Notation. It’s definitely one of the more harder and complicated parts of a technical interview or coding challenge, but hopefully this post will help some of you out there and provide some clarity on this subject.

We’ll cover exactly what Big O Notation is, some key concepts to grasp, and then go over a few examples. Let’s dive into it!

Overview

So, what is Big O Notation? If you Google the term, you will see lots of definitions and resources out there that…


In Part 10 of this series, we covered how to execute ‘clean up’ code by including it in a function and returning that function from the function passed to useEffect. That clean up code can be things like cancelling subscriptions or timers, or removing event listeners like we did in the example from Part 10.

By this point, if you’ve been following along with this series, you should have a pretty good grasp of the useState and useEffect Hooks. Now, let’s take what we’ve learned and see how we can fetch data from an API Endpoint using these Hooks.

One…


In Part 9 of this series, I went over how we can mimic componentDidMount with the useEffect Hook. As a refresher, we do this by simply passing in an empty array as the second parameter to useEffect.

Here in Part 10, we’ll go over how to mimic componentWillUnmount with the useEffect Hook. We’ll continue with the code that we were looking at in Part 9.

Starter Code

To get a better idea of why we would need something like componentWillUnmount, we’ll create a container component for the HookMouse functional component that we went over in the previous post. …


The last part of this series showed an example of how to conditionally run effects using the useEffect Hook. As a refresher, in order to conditionally run an effect, you need to specify a second parameter to useEffect. That second parameter is the array of values that the effect depends on. And if the values don’t change between renders, then the effect is not run.

This post will go over another example with the Effect Hook, this time showing how to run an effect only once. …


In the last part of this series, we went over an example of using the effect Hook, useEffect. One important point to take away from that last post is that the useEffect Hook is called after every single render.

However, in some cases, applying an effect after every render might create some issues such as performance problems. It would be nice if we had a way to conditionally run an effect from a functional component. Lucky for us, there is in fact a way to do this, and that’s what we’ll cover here in Part 8.

Class Component Example

First…


In Part 2 of this series, we’ll talk about images- specifically controlling the width of images for responsive design. If you’ve ever worked with an image file in your project, then I’m sure you know that when you first drop that image file into the appropriate folder and reference it in an img tag, more likely than not the sizing is going to look pretty awkward when you first check it out in your browser.

That image is most likely too small, too large, or sticking out of the container that it’s supposed to be in. …


I wanted to take a quick break from my Intro to React Hooks series by starting up a new series around Responsive Web Design. This is another topic that is very interesting to me and that I am attempting to learn more about as I strengthen my skills.

Nowadays, there are so many different screen sizes to account for when building a website. Think about all of the different devices we use each day to browse the internet- iPhones, iPads, laptops, desktops, maybe a big screen TV or screen projector. This makes building and designing a website much more difficult…


Now that we have a general understanding of the Effect Hook, useEffect, we’ll dive into some examples of when and how to use it. As a refresher from the previous post, useEffect is used for causing side effects in functional components. And it’s capable of handling what the componentDidMount, componentDidUpdate and componentWillUnmount lifecycle methods would normally take care of in class components.

This post will cover our first example with the useEffect Hook, showing how it can do the same thing as the lifecycle methods componentDidMount and componentDidUpdate, but in a functional component. …

Michael Rosenberg

Software Engineer/Full Stack Web Developer | Ruby, JavaScript, React, Redux

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