I Graduated! What Now?

React Hooks — UseState

After spending the past 10 months in the Flatiron School’s part time Software Engineering program, it seems strange not to have required reading or labs to complete. Now, it’s time to be accountable and continue my programming education. I was fortunate during my time at Flatiron to obtain some great resources and one was the Modern React with Redux Udemy class. My cohort was the last class to use the old curriculum which started with Ruby, moved onto Rails, then transitioned to the front end with JavaScript, React and Redux. I felt like this was a great way to learn from the back end out to the front end, however when it came to React, we learned functional and class components, not the hooks system. Now that I graduated, it’s the perfect time to learn hooks!

This Udemy course does a great job teaching the student functional and class components first, to provide the student with a solid understanding of components, props and state, before teaching the hooks system. I am still in the process of learning hooks, but they started with useState, which has been interesting and helpful.

For those not familiar with React state, state is data that is changed inside of your component, as opposed to props which are passed to the component. Before hooks, you would only be able to call state inside of a class component, but now we have access to the hook, useState, in order to mutate state inside of a functional component.

useState allows us to initialize state, setState and reference the value of state, similarly as we would in a class component, but it’s just formatted differently.

The first thing step is to import the useState function from the react library.

Next, initialize your state as seen below:

Here, we are calling useState which is coming from the React library. When we call useState, we’re using array destructuring to use the syntax of

const [activeIndex,setActiveIndex] (line 4).

The activeIndex element is the piece of state that we’re trying track and will change.

The setActiveIndex element is a function to update our state (similar to setState). Similarly to setState, the setActiveIndex calls the update and causes a re-render. On line 6 and 7, we are setting a new state based on the title click event.

When we call useState, it takes in one argument. This argument is the initialization value of state. In a class component, it would be as if we wrote state={activeIndex: null}.

One key difference between using state in a class component rather than using the hooks system in a functional component is when we need to change multiple pieces of state at the same time. You need to create a new variable as opposed to adding it into the state object.

Class component

state={

activeIndex: null,

anotherState: “”

}

Functional component using Hooks

const [activeIndex, setActiveIndex] = useState(null)

const [anotherState, setAnotherState] = useState(“”)

I hope this article helped get you started with hooks, and useState. It’s a great way to use state while writing functional components. This is the industry standard, however it’s good to know both methods in case you’re working with legacy code.

--

--

--

fashion professional turned software engineering student

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Nrwl’s growth supports our clients and the continued development of Nx

Angular Component communication using RxJS

Fire CMS as a Single Page Application

Learn GatsbyJS by creating a tourism site -8

Download ffmpeg works for arm

Loopback4 with AWS SQS Polling

All you need to know about VueX (Part-1)

React Native Tutorials -2

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
Angelo T

Angelo T

fashion professional turned software engineering student

More from Medium

Week 14: Final Learning Reflection

“STEPN” - Your Steps are Worth more than what you think💯

How Would You Describe a Home?

SURVIVING NYSC/ MY FINANCIAL JOURNEY