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...

Shopify Checkout Using UI Extensions

At Yeti we recently created a custom Shopify App using Checkout UI extensions to pull real-time data from a client’s Enterprise Resource Planning (ERP) system into Shopify. By the end of this article you will better understand what Shopify Checkout UI extensions are, how to approach building them, and some of the things to keep in mind during the implementation process.

colorful swirlsAn Introduction to Neural Networks

Join James McNamara in this insightful talk as he navigates the intricate world of neural networks, deep learning, and artificial intelligence. From the evolution of architectures like CNNs and RNNs to groundbreaking techniques like word embeddings and transformers, discover the transformative impact of AI in image recognition, natural language processing, and even coding assistance.

A keyboardThe Symbolicon: My Journey to an Ineffective 10-key Keyboard

Join developer Jonny in exploring the Symbolicon, a unique 10-key custom keyboard inspired by the Braille alphabet. Delve into the conceptualization, ideas, and the hands-on process of building this unique keyboard!

Browse all Blog Articles

Ready for your new product adventure?

Let's Get Started