React State in Class and Function Components
Before React 16.8, function components did not have state or lifecycle hooks. With 16.8+, function components can now use hooks to use state and you can implement side-effects on first render and after every update. To take a closer look at this, lets see how a function and class component use state and fire functions on initial and subsequent renders by building a bare-bones To-Do List app — twice — once as a class component and then again as a function component.
Setting up
The first noticeable difference between class and function components is, of course, their syntax. A class component extends from React.Component and sets up a render function that returns a React component.
import React, { Component } from 'react';class ClassComponent extends Component {
render() {
return ();
}
}export default ClassComponent;
Whereas a function component is plain JavaScript that accepts props as an argument and returns a React component.
import React from 'react';const FunctionComponent = () => {
return ();
}export default FunctionComponent
Initializing state
Our state is a JavaScript object containing data that can be binded to the output of the render function. Whenever a state property is updated, React re-renders the component accordingly. In class components, there are two ways to initialize state — in a constructor function or as a Class property.
Constructor functions, introduced in ES6, is the first function called in a class when it is first instantiated — meaning when a new object is created from the class. Initializing the state within the constructor function allows the state object to be created before React renders the component.
import React, { Component } from 'react';class ClassComponent extends Component {
constructor(props) {
super(props);
this.state = {
list: [],
currentItem: '',
}
}
render() {
return ();
}
}export default ClassComponent;
We can also use the Class property to initialize state. Once an instance of the class is in memory, the state’s properties are created and can be read by the render function.
import React, { Component } from 'react';class ClassComponent extends Component {
this.state = {
list: [],
currentItem: '',
}
render() {
return ();
}
}export default ClassComponent;
Both approaches net the same output so it all just comes down to preference. For the sake of this post, I’ll be sticking with the constructor function approach as we continue our comparison.
With React 16.8, function components can now use state. Before this, data from the state had to be passed down as props from class components to function components or you had to convert your function component to a class component. Now, we can use React hooks, and to use state we can use the useState hook. You declare a state variable along with a set state variable by using array destructuring instead of declaring state as an object and setting as many properties as you need all at once.
import React, { useState } from 'react';const FunctionComponent = () => {
const [list, setList] = useState([]);
const [currentItem, setCurrentItem = useState('');
return ();
}export default FunctionComponent
Render components
Great, now that we have our state initialized, let’s render our components. I’m going to add some items to our list property in the state so we have some data to render. Note that each item in the list is an object with three properties each — an id, a task, and a completed property which indicates if a task on our to-do list has been finished. I’m also going to install and import react-flexbox-grid so we have an easy to use grid system.
Class Component:
import React, { Component } from 'react';
import { Grid, Row, Col } from 'react-flexbox-grid';class ClassComponent extends Component {
constructor(props) {
super(props);
this.state = {
list: [
{
id: 1,
task: 'Create tasks',
completed: false,
},
{
id: 2,
task: 'Read tasks',
completed: false,
},
{
id: 3,
task: 'Mark complete',
completed: false,
},
{
id: 4,
task: 'Delete tasks',
completed: false,
},
],
currentItem: '',
}
}
render() {
return (
<Grid fluid>
<Row>
<Col xs={6} md={3}>
<h3>Things to do:</h3>
<ul>
{this.state.list.length ? ( this.state.list.map( item => (
<React.Fragment key={item.id}>
<li>
{item.task}
</li>
</React.Fragment>
))
) : (null)
}
</ul>
</Col>
</Row>
</Grid>
);
}
}export default ClassComponent;
Function component:
import React, { useState } from 'react';const FunctionComponent = () => {
const [list, setList] = useState([
{
id: 1,
task: 'Create tasks',
completed: false,
},
{
id: 2,
task: 'Read tasks',
completed: false,
},
{
id: 3,
task: 'Mark complete',
completed: false,
},
{
id: 4,
task: 'Delete tasks',
completed: false,
},
],);
const [currentItem, setCurrentItem] = useState('');
return (
<Grid fluid>
<Row>
<Col xs={6} md={3}>
<h3>Things to do:</h3>
<ul style={{listStyleType: 'none'}}>
{list.length ? (
list.map( item => (
<React.Fragment key={item.id}>
<li>
{item.task}
</li>
</React.Fragment>
))
) : (null)
}
</ul>
</Col>
</Row>
</Grid>
);
}export default FunctionComponent
Setting state
Now that we have initialized state and rendered out our components let’s add some functionality that will manipulate our state data such as adding tasks, marking tasks complete, and deleting tasks. This will allow us to see the difference in how state is updated in class and function components.
In both class and function components, when updating the state, you should not update it directly. For class components the provided method is setState. For function components, we can use the set state variable we declared when we initialized our state using the React hook useState.
Adding task in a class component:
I’d like to add a text input field to allow a user to add a task to their to-do list. I will set the value attribute to this.state.currentItem which we just initialized in our state object and I’ll also create a handleChange function that will fire through the onChange attribute of the input tag. The handleChange function will use setState to update the currentItem property of the state. This is known as a controlled component — when an input’s value is controlled by React and not HTML. Now, as the user types in the input field, the currentItem is being updated with every keystroke.
handleChange = e => this.setState({currentItem: e.target.value})Note that setState accepts an object which updates the state with the corresponding property or properties in that object.
I will also wrap the input tag with form tags and set the onSubmit attribute to a handleSubmit function. This will tack on another item in the list array. That item will be an object with the same three properties we noted earlier. After preventing the default behavior of an onSubmit, which is refreshing the page, we’ll need to generate a uniqueid and then set the state to push the new item to the list. I’ll be using setState again but this time, instead of passing in an object, I’ll pass in a function that returns an object. Because our new state depends on grabbing data from the previous state, we can pass in the previous state to do exactly that. Our handleChange function updated the currentItem so now our handleSubmit needs to grab the value of the currentItem and set that to the task property of the new item. Finally, for the third property we will set completed to false. Also, by passing in a function, we can run some code before returning our object. I’ll declare a const newItem and set it equal to an object with our three properties. Now we can return an object setting the list property to an array that spreads out the list from the previous state and adds the newItem at the end of the array. We can also set currentItem to an empty string. This will reset the input field to be blank, making it easier for the user to type in another task.
import React, { Component } from 'react';
import { Grid, Row, Col } from 'react-flexbox-grid';class ClassComponent extends Component {
.
.
.
handleChange = e => this.setState({currentItem: e.target.value}) handleSubmit = e => {
e.preventDefault() // generate an unused id
let newId = 1;
let sortedListByIds = this.state.list.slice().sort((a, b) => (a.id - b.id))
for (let i = 0; i < sortedListByIds.length; i++) {
if (newId === sortedListByIds[i].id) {
newId++
}
}this.setState(prevState => {
const newItem = {
id: newId,
task: prevState.currentItem,
completed: false,
}
return {
list: [...prevState.list, newItem],
currentItem: '',
}
})
}render() {
return (
<Grid fluid>
<Row>
<Col xs={6} md={3}>
.
.
.
</Col>
<Col xs={6} md={6}>
<h4>Add task:</h4>
<form onSubmit={this.handleSubmit}>
<input type="text" autoFocus value={this.state.currentItem} onChange={this.handleChange} />
<button type="submit">+</button>
</form>
</Col>
</Row>
</Grid>
);
}
}export default ClassComponent;
Adding task in a function component:
For the function component the form and input tags will be exactly the same as how we set them up in the class component. The handleChange and handleSubmit will use the set variables we declared when we initialized our state via the useState React hook. Recall that when we set up our array destructuring for currentItem the second item was setCurrentItem. This is what we use to update our currentItem.
const handleChange = e => setCurrentItem(e.target.value)For the handleSubmit function we’ll still prevent the default behavior and we’ll still generate a unique id but we’ll update the state using the useState React hook. Unlike in the class component where we can update two properties at once, with useState we have to do it separately for each. To add the new item to our list, like in the class component we’ll need to access the previous list. useState can also accept a function as an argument and we can pass in an argument to that function, in our case prevList, to grab the previous data. To reset the input field we can pass in an empty string in setCurrentItem…
const handleSubmit = e => {
e.preventDefault() // generate an unused id
let newId = 1;
let sortedListByIds = list.slice().sort((a, b) => (a.id - b.id))
for (let i = 0; i < sortedListByIds.length; i++) {
if (newId === sortedListByIds[i].id) {
newId++
}
}setList(prevList => {
const newItem = {
id: newId,
task: currentItem,
completed: false,
}
return [...prevList, newItem]
})
setCurrentItem('')
}
Toggling complete status and deleting a task in a class component:
For both the class and function component the jsx for marking an item as complete or incomplete and for the button to delete a task will be the same. Clicking a list item will give it a strike-through to indicate the task is complete and clicking it again will remove the strike-through indicating that it is not complete. Each list item will also have a button to delete the item from the list.
.
.
.
<ul style={{listStyleType: 'none'}}>
{list.length ? (
list.map( item => (
<React.Fragment key={item.id}>
<li onClick={() => toggleCompleteStatus(item.id)} style={{textDecoration: item.completed ? 'line-through' : 'none'}}>
{item.task}
</li> <button onClick={() => deleteTask(item.id)}>x</button>
</React.Fragment>
))
) : (null)
}
</ul>
.
.
.Now let’s wire these up to some functions. For toggleCompleteStatus we’ll pass in an id and use setState to return an object with a list property. We’ll use the map method to map through the current list and find the item with the matching id and toggle that item’s complete status from false to true or vice versa.
toggleCompleteStatus = id => {
this.setState(() => {
return {
list: this.state.list.map( item => item.id === id ? {...item, completed: !item.completed} : item)
}
}
}For the deleteTask function, we’ll also pass in an id. We’ll also declare a variable let filteredList and we’ll use the filter method to search each item in the list for an id that doesn’t match the argument. All items that don’t match will be returned in a new array leaving out the item that is being deleted. We can then use setState to return an object with the list property equal to an array with the filteredList spread out.
deleteTask = id => {
let filteredList = this.state.list.filter( item => item.id !== id)
this.setState({
list: [...filteredList]
}
}Toggling complete status and deleting a task in a function component:
In a function component these functions will look quite similar except we’ll again be using the set state variable we declared with React’s useState to update our data instead of setState. The array methods we used — map and filter — are used the same exact way.
const toggleCompleteStatus = id => {
setList(list.map( item => item.id === id ? {...item, completed: !item.completed} : item))
}const deleteTask = id => {
let filteredList = list.filter( item => item.id !== id)
setList([...filteredList])
}
Lifecycle and useEffect Hooks
Class components can use lifecycle hooks to fire functions at specific points in a components life. For instance, a good time to fetch data from an api is during the componentDidMount hook which runs after the component output has been rendered to the DOM. Function components, however, do not have lifecycle hooks but can still fire side-effects on first render and after every update. So firing a side-effect on first render only is equivalent to firing a function on the componentDidMount hook. This is done using the React hook useEffect.
To show an example of both of these, let’s use localStorage as a way to make the data persistent. This will also make this to-do list app a truly functional application as the data will persist even if a user refreshes the page, closes their browser, or shuts down their computer.
Persisting list items with setState’s callback function:
The setState function accepts a second parameter which is a callback function. So for handleSubmit, toggleCompleteStatus, and deleteTask, we can tack on some code to save our list data local to the user’s device. The setItem method of localStorage will save data as a key-value pair in our user’s browser where the value is in a JSON format. In our case, we’ll be saving the value of our state's list property. The setItem method takes two arguments. This first is a string which is used as our key and the second is a JSON object which is used as our value. We’ll use the method JSON.stringify and pass in our list to convert it to a JSON object…
localStorage.setItem('list', JSON.stringify(this.state.list))So now we can tack this on to the setState callback functions of handleSubmit, toggleCompleteStatus, and deleteTask.
handleSubmit = e => {
.
.
.
this.setState(prevState => {
const newItem = {
id: newId,
task: prevState.currentItem,
completed: false,
}
return {
list: [...prevState.list, newItem],
currentItem: '',
}
}, () => localStorage.setItem('list', JSON.stringify(this.state.list))
)
}toggleCompleteStatus = id => {
this.setState(() => {
return {
list: this.state.list.map( item => item.id === id ? {...item, completed: !item.completed} : item)
}
}, () => localStorage.setItem('list', JSON.stringify(this.state.list))
)
}deleteTask = id => {
let filteredList = this.state.list.filter( item => item.id !== id)
this.setState({
list: [...filteredList]
}, () => localStorage.setItem('list', JSON.stringify(this.state.list))
)
}
setState is an asynchronous function and its second parameter, the callback function, fires after the state is updated. This means that you can be confident that the data passed into the dev tools’ Local Storage will be the most current.
You can view the Local Storage data by opening your dev tools and clicking the Application tab.
Persisting list items with useEffect:
We’ve been using our ‘set’ functions to update our state in function components. While setState allows for a callback function as a second parameter in class components, our set state functions do not have this same convenience. However, we can use the React hook useEffect to fire side-effects whenever a particular state updates. Lets import useEffect like so…
import React, { useState, useEffect } from 'react';Instead of adding code to one of our current functions, we pass in an anonymous function as the first parameter for useEffect and an array of variables for the second parameter. The block of code in the anonymous function will fire every time one of the variables in the second parameter’s array is updated.
useEffect(() => {
localStorage.setItem('list', JSON.stringify(list))
}, [list])Note how the second argument has an array with the variable list in it. Since handleSubmit, toggleCompleteStatus, and deleteTask all update the list state, then this useEffect function will fire every time those functions update list.
Get local data on componentDidMount:
Cool, so now we can set data to our Local Storage in both class and function components but we still need to get the data so it can be rendered to the DOM.
For both our class and function component, we do have an initial state for our list items but we want to check if there is local data as well, so if a user has already used this app they can see their task list as it was when they last loaded the site.
The best time to grab this data for a class component is during the componentDidMount lifecycle hook which occurs right after the class component has rendered. We’ll use the getItem method of localStorage which accepts one argument which is a string of the name of the key that stores our data — in our case 'list'. We will also have to use JSON.parse() to convert our JSON string to an array. If a user has no local data then it will return null. If it is null then we won’t need to set our state and the initial state we set in our constructor function will remain and render. If it’s not null then we’ll set our state to update the list property with the data we just grabbed.
componentDidMount() {
let localList = JSON.parse(localStorage.getItem('list'));
if (localList !== null) {
this.setState(() => {
return {
list: localList
}
})
}
}Get local data on initial render with useEffect:
We now know that we can fire side-effects whenever one of our state variables update. But if function components don’t have life-cycle hooks how can we fire side-effects on initial render? For this, all we have to do is pass in an empty array as the second parameter. In this case, useEffect will only fire on initial render just like componentDidMount.
useEffect(() => {
let localList = JSON.parse(localStorage.getItem('list'));
if (localList !== null) {
setList(localList)
}
}, []) // empty array as second argument will behave exactly like componentDidMountConclusion
And that’s it! We now have a fully functional to-do list application built two different ways — through a class component and through a function component. We have an initial state of list items that load the first time a user uses this app. They can add and delete tasks. They can mark tasks as complete or incomplete. And the data saves in their browser’s localStorage so if they close their browser and later come back to this site their data will still be available to see and update as needed. No need to save to a cloud or log into an account. The privacy of their data is as good as their device’s privacy is. This was a bare-bones implementation so I’ll leave the CSS up to you. My hope from this is that you learned or reinforced your knowledge of the difference of how state is initialized and updated through class and function components in React and how to use life-cycle hooks and useEffect. Thanks for reading and making it this far. Be good people!
View app: https://darrylmendonez.github.io/barebones-react-todo-list/#/
View repo: https://github.com/darrylmendonez/barebones-react-todo-list
