EpicReact — Hooks
This is a continuation of ongoing series about each section in the EpicReact course. This is part two in the series. If you want to read part one. Visit here. This section introduces React Hooks which are a shorthand way of using React lifecycle events through functional components. Let’s talk about each section and see what I learned from this module.
Module 2: Part 1/6 — useState
This first section teaches you about utilizing React’s useState hook. This hook holds the state for the component. useState consists of a pair of values. You get this pair by destructuring the array into each distinct variable. The first of the pair is the value and the second is a function that you can call to update the state.
const [name, setName] = React.useState(initialName)
Since React updates when it notices a change to the component’s state, the ‘website’ will update the page whenever a user updates an area that contains state. For example, an input field can contain the state of a name and be updated when a user changes the input in the field. In this section, you have an input box and are tasked to set up an onChange handler to change a message at the bottom of the box to update when you type in anything in the box. Easy enough! However, this gives a good understanding of how state works and can be used in React.
Module 2: Part 2/6 — useEffect
Now it’s time to learn about useEffect. useEffect is a hook that will run your custom code when the component renders or even when it re-renders depending on the parameters that you set. In this section, you are tasked to use localStorage to get the initial state of the name (from part 1), if it is available. Then, keep updating the localStorage whenever the state is changed. Later there are extra credits to learn about lazy loading, dependencies, custom hooks, and flexible localStorage hooks. This was a very fun lesson that teaches a lot about state management and how cool React can really be!
Module 2: Part 3/6 — Lifting State
You can’t build everything in one file. Well, clearly React doesn’t believe so either. In this lesson, you learn about lifting state from one component (function) to another. You are tasked to lift the state from the children components up to the parent component in order to access both sets of state.
Depending on the size of the application. This is where state management tools like Redux or Context come in.
Module 2: Part 4/6 — useState: tic tac toe
Part 4 has two options. Option one is to convert the classes file to functional components using hooks. Option two is completing the tic tac toe game which took me a lot of effort. I actually had to reference the solution a few times during this part. I did end up doing both options for more practice.
The tic tac toe game even includes history with the ability to go back in time to a certain move and change history (Spooooky)! The history functionality is part of the extra credit exercises, but it was incredibly fun to complete and I learned a lot of about state management by completing it.
Module 2: Part 5/6 — useRef and useEffect: DOM Interaction
In this part, you learn about the useRef, and useEffect hooks along with an external library (VanillaTilt) to create a very cool effect that allows you to tilt a div on the screen when you hover over it. This was my first time ever using the useRef hook and it was actually very interesting.
Module 2: Part 6/6 — useEffect: HTTP Requests
Now for the capstone lesson in module two. Learning HTTP Requests. This lesson teaches you how to use useState and useEffect in conjunction with external sites to fetch data and parse it. In this lesson, they use a library that you import to do this for you just to prevent confusion of learning too much at once (Which I found helpful). The best part: You use Pokemon data!
This lesson has a ton of extra credit which was really fun and challenging to go through! It includes error handling, handling network statuses, storing the state in an object, creating an ErrorBoundary component, re-mounting the error boundary, using react-error-boundary, resetting the error boundary, and using resetKeys. A lot of stuff!
Conclusion
In conclusion, I learned a lot about React Hooks in this lesson. Even though, I knew a bit about React Hooks prior to this module, I learned so much more than I thought I would’ve. Clearly, I was much more surface level than I previously had thought. I was very excited to take on this module, but I am even more excited to keep continuing to learn about React through EpicReact where I plan to do Advanced React Hooks next week and much more to follow just shortly after! I hope this gave some insight into what you could learn by completing EpicReact and if you have purchased it, I hope you find the same value in it as I have.
