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.
