yeti logo icon
Close Icon
contact us
Yeti postage stamp
We'll reply within 24 hours.
Thank you! Your message has been received!
A yeti hand giving a thumb's up
Oops! Something went wrong while submitting the form.

Getting Hooked on Hooks: Diving into Hooks with React and Redux

January 23, 2020

I've always loved React. It's been my favorite programming language since I started working in web development.

The concept of components and state was easy to wrap my brain around, and made sense to me. Building these components and having them interact with each other is like creating your own Lego blocks to build a website.

State management has gone through many forms since React was released in 2016, from helper functions in ComponentDidUpdate and ComponentDidMount, to the current evolution of functional components and hooks making waves in the react community.

I'm always excited to try a new pattern for developing components, and diving into hooks has been a very rewarding experience. I’m here to provide some examples of why you should adopt them and why they are all the rage these days.

What is the problem hooks are trying to solve?

1. Providing a pattern for handling state

2. Cutting down on code while still maintaining, and even expanding on, the capabilility of functional React Components

3. Giving functional components access to state previously only accessible through class components

That last one, functional components, is a direct line into a much larger React conversation. A line, taken straight from the hooks FAQ, reads “hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.”

Why?! Might you ask. This article by David Joch, written in 2018, provides insight into the battle between State vs Functional components. The decision to choose between these two types of components are your call. But functional components are more fun. And You get to use hooks. Which are also fun.

Alright, enough backstory, now practical hooks in practice.

In the introductory example of hooks, `useState` is imported from React ( make sure its 16.8 and above) and initialized with two constants, `count` and `setCount`. As a rule, useState takes the initial value of the state as an argument. It always returns a pair of values, the current state and a function that updates it. This means there’s only two things to think about. A variable to be used anywhere and a very simple updating method.

Also, a thing to note is you don’t have to use the variable inside the updating function. This is shown in the example below:

You can create several state variables inside the functional component by repeating the useState function, or you can also roll all of your variables into one `state` object (which is fun and saves lines!)

And there you have it, running functional components with hooks! Fun times!

You Might also like...

VIDEO: Building API's with Django and GraphQL

At our last Django Meetup Group event, Jayden Windle, the lead engineer at Jetpack, an on demand delivery company, talks building APIs with Django and GraphQL. Watch the video to learn more.

Using Pytest to Write Beautiful Tests and a Bulletproof Django App

At the last meeting of the San Francisco Django Meetup Group, Wes Kendall gave a talk on how to make a bulletproof Django application by testing it with pytest. Check out his talk here!

Creating a Reusable Component Library: Yeti Lunch and Learn

Part of the Yeti Lunch and Learn series - our amazing developer, Resdan, gives a presentation on creating a reusable component library. Enjoy the video!

Browse all Blog Articles

Ready for your new product adventure?

Let's Get Started