Hooks! — Flatiron Phase 2 React

I enjoyed the process of learning React and found it to be a more understandable language than JS. My final project is viewable HERE. For the project, I wanted to incorporate some of the things from the phase that I found the most interesting. A few of those things include client side routing and url changes, react information flow, search and filter functionality, and state and events changes.

The most interesting aspect of this module that I found myself going back and wanting to learn more about was Hooks and the abilities that they have. During the course of my Phase 2 React project the 2 hooks that I used were useState, and useEffect.

In short, Hooks are special functions that let you use state and other React features (props, context, etc) without using a class component. Prior to hooks, React used Class based components and a they required a fair amount of boilerplate code to do the same things that functional components can now use with Hooks. For this brief blog, I will do my best to explain the 2 most useful React Hooks (in my opinion). Those 2 hooks would be useState, and useEffect.

One of the biggest advantages of Hooks is that is allows for simpler code, which is always a good thing (especially when starting out).

Basics of Hooks

-Hooks must be called from the top level of Functional components, not nested inside functions (not reg functions or loops) UNLESS you are creating a custom hook.

-Hooks come in 2 types, there are built in React hooks, as well as custom hooks.

Built in Hooks

Hooks come with a couple basic rules:

-The hook must start with the prefix use-

- The hook must be imported to the component that it is being used on:

Custom Hooks

In addition to Reacts built in Hooks, React also offers the freedom to build custom hooks. Similar to built in hooks, custom Hooks must also start with the prefix use-. The unique part about custom Hooks is that prebuilt Hooks can be used inside of them to make a more powerful/ useful hook.

There are numerous prebuilt hooks in React that help get tasks done easier and faster, but I would like to outline just the most popular two.

useState

By accessing the useState hook, React gives us an easy way to update data that is intended to change by the users interaction with an app.

After importing the hook to the component, the variable must be defined and useState given its initial value:

In this example the initial value of the count variable is 0.

Then, to change the state of this variable, we must use the setCount function, and make some sort of change to count.

Now, the click on each button will re-render the count variable and either increase or decrease by 1.

During my project, I used the useState hook to show simple state changes on each pet card, as well as inside of the Search component to filter the pets based on the value of the search bar.

useEffect

The useEffect Hook lets you perform side effects within function components. Some examples of side effects that this hook can help with are fetch requests, manipulating DOM directly, using timer functions like setTimeout(), and more.

By using the useEffect hook, you are telling React that you want your component to do something after it renders. Also, by default the useEffect hook runs on first render, and after every update. The useEffect hook can accept to arguments: the callback function, and a dependencies array.

• The callback is the function containing the side effect logic, and is executed right after the changes are pushed to the DOM
• The dependencies array is an optional array of dependencies that if changed, then the callback is executed. (This lets you control when the side effect runs)

More on Dependencies

The dependencies array can either not be provided, contain nothing, or contain some state and/ or props. When the array is not provided, the side-effect runs after every re-render. If the empty array is provided, the side-effect only re-renders once, upon the initial render. Finally, if the array contains state or props, the side-effect is run only after each change to the state or props.

At first Hooks were a bit confusing, but after learning more about them, and experimenting with them in labs and through the course of the React project, I’ve come to discover how necessary and helpful they are. Hooks are able to give functional components a lot more power and opportunity for simpler, easier to understand code.