Hooks by Example: Convert a Tesla Battery Range Calculator to Functional Components
In this article I change the TeslaBattery Class Component to a Functional Component with React hooks.
Join the DZone community and get the full member experience.
Join For Free
In this tutorial, we started with an existing React-app with which we can calculate how much range the Tesla has under different circumstances. The range of a battery depends on the speed, the outside temperature, the climate and the wheel size.
In order to learn React hooks more thoroughly I converted this existing React-app from React Class Components to one with just React Functional Components. That is the goal of this tutorial!
As a starting point for the tutorial, clone this Github repository.
Then, move to the reactjs-app directory:
Shell
x
1
cd workshop-reactjs-vuejs/reactjs-app
Project Structure
The project we are working on has the same structure as the aforementioned image and shows the components that make up this application. The index.js is the entry point of the application. App.js is the entry component of the application. The outer edge of the figure above shows the App.js component.
Breaking Down the UI
Almost all React applications consist of a composition of components. This application consists of an entry App.js component with the TeslaBattery as a child component. And the TeslaBattery component contains the following child components:
TeslaCar: for rendering the TeslaCar image with wheel animation.
TeslaStats: for rendering the maximum battery range per Tesla model. This concerns the models: 60, 60D, 75, 75D, 90D, and P100D.
TeslaCounter: for manually controlling the speed and the outside temperature.
TeslaClimate: this changes the heating to air conditioning when the outside temperature is more than 20 degrees.
TeslaWheels: for manually adjusting the wheel size from 19 inches to 20 inches and vice versa.
These child components of the TeslaBattery are already React Functional Components.
But the TeslaBattery is still a React Class Component. In this tutorial, we are going to convert this component to a React Functional Component with hooks in 8 steps.
But What Is a Hook?
Hooks are functions that let you “hook into” React state and lifecycle features from functional components. Hooks don’t work inside classes. So our first step is to change the class to a function with hooks.
The components tree of the application is as follows:
Steps to Convert the TeslaBattery Component to a Functional Component
First, open the source file TeslaBattery.js in your IDE and follow these steps:
1. Change the Class to a Function
Change
JavaScript
xxxxxxxxxx
1
1
class TeslaBattery extends React.Component {
To
JavaScript
xxxxxxxxxx
1
1
function TeslaBattery (props) {
2. Remove the Render Method
Remove the render method, but keep everything after, including the return. Make this the last statement in your function.
From
JSX
xxxxxxxxxx
1
36
1
render() {
2
const { config, carstats } = this.state;
3
return (
4
<form className="tesla-battery">
5
<h1>Range Per Charge</h1>
6
<TeslaCar wheelsize={config.wheels} ></TeslaCar>
7
<TeslaStats carstats={carstats} ></TeslaStats>
8
<div className="tesla-controls cf">
9
<TeslaCounter
10
currentValue={this.state.config.speed}
11
initValues={this.props.counterDefaultVal.speed}
12
increment={this.increment}
13
decrement={this.decrement}
14
></TeslaCounter>
15
<div className="tesla-climate-container cf">
16
<TeslaCounter
17
currentValue={this.state.config.temperature}
18
initValues={this.props.counterDefaultVal.temperature}
19
increment={this.increment}
20
decrement={this.decrement}
21
></TeslaCounter>
22
<TeslaClimate
23
value={this.state.config.climate}
24
limit={this.state.config.temperature > 10}
25
handleChangeClimate={this.handleChangeClimate}
26
/>
27
</div>
28
<TeslaWheels
29
value={this.state.config.wheels}
30
handleChangeWheels={this.handleChangeWheels}
31
></TeslaWheels>
32
</div>
33
<TeslaNotice ></TeslaNotice>
34
</form>
35
)
36
}
To
JSX
xxxxxxxxxx
1
32
1
return (
2
<form className="tesla-battery">
3
<h1>Range Per Charge</h1>
4
<TeslaCar wheelsize={config.wheels} ></TeslaCar>
5
<TeslaStats carstats={carstats} ></TeslaStats>
6
<div className="tesla-controls cf">
7
<TeslaCounter
8
currentValue={config.speed}
9
initValues={props.counterDefaultVal.speed}
10
increment={increment}
11
decrement={decrement}
12
></TeslaCounter>
13
<div className="tesla-climate-container cf">
14
<TeslaCounter
15
currentValue={config.temperature}
16
initValues={props.counterDefaultVal.temperature}
17
increment={increment}
18
decrement={decrement}
19
></TeslaCounter>
20
<TeslaClimate
21
value={config.climate}
22
limit={config.temperature > 10}
23
handleChangeClimate={handleChangeClimate}
24
/>
25
</div>
26
<TeslaWheels
27
value={config.wheels}
28
handleChangeWheels={handleChangeWheels}
29
></TeslaWheels>
30
</div>
31
<TeslaNotice ></TeslaNotice>
32
</form>
You see that we also removed this.state in the first line. This is because we handle state in a different way (see step 5).
JavaScript
xxxxxxxxxx
1
1
// const { config, carstats } = this.state;
3. Convert All Methods to Functions
Class methods won't work inside a function, so let's convert them all to functions (closures).
From
JavaScript
xxxxxxxxxx
1
1
calculateStats = (models, value) => {
2
//..
3
}
To
JavaScript
xxxxxxxxxx
1
1
const calculateStats = (models, value) => {
2
//..
3
}
Note: Do this also for all other methods!
4. Remove this.state Throughout the Component
The this.state variable in your function isn't useful anymore. Remove the references to it throughout your render and functions. In step 6, we use the useState hook for this.
5. Remove References to this
The this variable in your function isn't useful any more. Remove the references to it throughout your render and functions.
6. Remove the Constructor
Simply removing the constructor is a little tricky, so I'l break it down further.
1. Remove Event Handler Bindings
We don't need to bind event handlers any more with functional components. So if you were doing this;
JavaScript
xxxxxxxxxx
1
10
1
constructor(props) {
2
super(props);
3
4
this.calculateStats = this.calculateStats.bind(this);
5
this.statsUpdate = this.statsUpdate.bind(this);
6
this.increment = this.increment.bind(this);
7
this.decrement = this.decrement.bind(this);
8
this.updateCounterState = this.updateCounterState.bind(this);
9
this.handleChangeClimate = this.handleChangeClimate.bind(this);
10
this.handleChangeWheels = this.handleChangeWheels.bind(this);
You can simply remove these lines (What a gross, overly verbose syntax anyway).
2. useState Hook
Instead of
JavaScript
xxxxxxxxxx
1
13
1
constructor(props) {
2
super(props);
3
4
this.state = {
5
carstats: [],
6
config: {
7
speed: 55,
8
temperature: 20,
9
climate: true,
10
wheels: 19
11
}
12
}
13
}
Use the useState hook
JavaScript
xxxxxxxxxx
1
1
function TeslaBattery (props) {
2
3
const [carstats,setCarstats] = useState([]);
4
const [config,setConfig] = useState({
5
speed: 55,
6
temperature: 20,
7
climate: true,
8
wheels: 19
9
});
What does calling useState do? It declares a “state variable”. Our variables are called carstats and config, but we could call it anything else, like 'banana'. This is a way to “preserve” some values between the function calls — useState is a new way to use the exact same capabilities that this.state provides in a class. Normally, variables “disappear” when the function exits but state variables are preserved by React.
What do we pass to useState as an argument? The only argument to the useState() hook is the initial state. Unlike with classes, the state doesn’t have to be an object. We can keep a number or a string if that’s all we need. In our example, we pass an empty array as initial state for our variable carstats. And we pass an object with default values as initial state for our variable config.
What does useState return? It returns a pair of values: the current state and a function that updates it. This is why we write const [carstats, setCarstats] = useState([]). This is similar to this.state.carstats and this.setState() in a class, except you get them in a pair.
So, do not use this.setState() in Functional Component. this.setState() works only in Class Components to update the state of variables. See step 7.
Finally import your hook:
JavaScript
xxxxxxxxxx
1
1
import React, { useState } from 'react';
7. Replace this.setState
this.setState obviously doesn't exist any more in our function component. Instead, we need to replace each of our setState calls with the relevant state variable setter.
Replace first the this.setState for carstats:
JavaScript
xxxxxxxxxx
1
1
class TeslaBattery extends React.Component {
2
3
statsUpdate() {
4
const carModels = ['60', '60D', '75', '75D', '90D', 'P100D'];
5
// Fetch model info from BatteryService and calculate then update state
6
this.setState({
7
carstats: this.calculateStats(carModels, this.state.config)
8
})
9
}
With the setCarstats - setter
JavaScript
xxxxxxxxxx
1
1
function TeslaBattery (props) {
2
3
const [carstats,setCarstats] = useState([]);
4
5
const statsUpdate = () => {
6
const carModels = ['60', '60D', '75', '75D', '90D', 'P100D'];
7
// Fetch model info from BatteryService and calculate then update state
8
setCarstats(calculateStats(carModels, config));
9
}
Attention! Call React hooks always at the Top Level of your function.
AND
Replace the this.setState for config:
JavaScript
xxxxxxxxxx
1
1
class TeslaBattery extends React.Component {
2
3
updateCounterState(title, newValue) {
4
const config = { this.state.config };
5
// update config state with new value
6
title === 'Speed' ? config['speed'] = newValue : config['temperature'] = newValue;
7
// update our state
8
this.setState({ config }, () => {this.statsUpdate()});
9
}
Note: You see in this example how this.setState accept a callback (() => {this.statsUpdate()) that would run after the state-object (i.e. the config-object) is updated? Well our useState updater function does no such thing. Instead, we have to use the useEffect hook. This is explained in the next section.
Replace this.setState with this setConfig - setter:
JavaScript
xxxxxxxxxx
1
16
1
function TeslaBattery (props) {
2
3
const [config,setConfig] = useState({
4
speed: 55,
5
temperature: 20,
6
climate: true,
7
wheels: 19
8
});
9
10
const updateCounterState = (title, newValue) => {
11
const config_ = { config };
12
// update config state with new value
13
title === 'Speed' ? config_['speed'] = newValue : config_['temperature'] = newValue;
14
// update our state
15
setConfig(config_);
16
}
Do this also for the following event handlers for setting the state of the config-object:
handleChangeClimate(size).handleChangeWheels(size).
8. Replace Lifecycle Methods With the useEffect Hooks
First import your useEffect hook
JavaScript
xxxxxxxxxx
1
1
import React, { useEffect, useState } from 'react';
Replace ComponentDidMount()
Instead of using the componentDidMount lifecycle method, use the useEffect hook with the dependency array filled: [config] !
Replace
JavaScript
xxxxxxxxxx
1
1
componentDidMount() {
2
this.statsUpdate();
3
}
With
JavaScript
xxxxxxxxxx
1
1
useEffect(()=>{
2
statsUpdate();
3
// eslint-disable-next-line
4
},[config])
The Effect Hook lets you perform side effects in Functional Components. The side effect here is executing the statsUpdate() function.
The dependency array [config] given in parameters lets you fire the side effect only when the config-object in the array is changed. This way, you can easily create lifecycle methods like componentDidMount and componentDidUpdate via the Effect hook.
What does useEffect do? By using this Hook, you tell React that your component needs to do something after render. React will remember the function you passed (we’ll refer to it as our “effect”), and call it later after performing the DOM updates. In this effect, we call the statsUpdate() function, but we could also perform data fetching or call some other imperative API.
Does useEffect run after every render? Yes! By default, it runs both after the first render and after every update. Instead of thinking in terms of “mounting” and “updating”, you might find it easier to think that effects happen “after render”. React guarantees the DOM has been updated by the time it runs the effects.
Motivation of Using Hooks
With Hooks, you can extract stateful logic from a component so it can be tested independently and reused. Hooks allow you to reuse stateful logic without changing your component hierarchy. This makes it easy to share Hooks among many components or with the community.
And Hooks let you split one component into smaller functions based on what pieces are related (such as setting up a subscription or fetching data), rather than forcing a split based on lifecycle methods.
How to reuse your hooks between Components?
1. Create a separate file with a proper name for example: useStatesHooks.js. This file contain the useState hooks which you want to share between components.
JavaScript
xxxxxxxxxx
1
12
1
const useStatesHooks = () => {
2
const [carstats,setCarstats] = useState([]);
3
const [config,setConfig] = useState({
4
speed: 55,
5
temperature: 20,
6
climate: true,
7
wheels: 19
8
});
9
return { carstats, config };
10
}
11
12
export default useStatesHooks;
2. import this useStatesHooks into your TeslaBattery.js functional component
JavaScript
xxxxxxxxxx
1
1
import useStatesHooks from './useStatesHooks';
2
3
function TeslaBattery (props) {
4
const { carstats, config } = useStatesHooks();
5
6
.
Conclusion
In order to learn this more thoroughly I converted an existing React-app from class components to one with just functional components using just the hooks in this article. The result was dramatically cleaner and easier to read code.
I can’t see any reason why I would not use hooks exclusively in the future. I look forward to creating custom hooks and using some of the more advanced features that hooks have to offer.
Topics:
react hooks,
webcomponents,
javascript,
reactjs,
es6,
usestate,
useeffect,
components
Opinions expressed by DZone contributors are their own.
Comments