Effect Hook | Part 2

 

1. Persisting data while using React Hooks

1.1 Storing values in Local Storage

In

useEffect

we have access to the updated state values, so we write the logic for storing values inside it.

File: src/components/BmiCalculator/index.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

...

const BmiCalculator = () => {

const [height, setHeight] = useState(170)

const [weight, setWeight] = useState(60)

useEffect(() => {

document.title = `Your BMI: ${getBmi(weight, height)}`

localStorage.setItem("height", JSON.stringify(height))

localStorage.setItem("weight", JSON.stringify(weight))

})

...

return (...)

}

export default BmiCalculator

JSX

Collapse

1.2 Getting values from the Local Storage

Once after getting the values from the Local Storage, provide them as the initial values for the

useState

hook

File: src/components/BmiCalculator/index.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

...

const BmiCalculator = () => {

const storedHeight = JSON.parse(localStorage.getItem("height"))

const storedWeight = JSON.parse(localStorage.getItem("weight"))

const [height, setHeight] = useState(storedHeight !== null ? storedHeight : 170)

const [weight, setWeight] = useState(storedWeight !== null ? storedWeight : 60)

useEffect(() => {

...

localStorage.setItem("height", JSON.stringify(height))

localStorage.setItem("weight", JSON.stringify(weight))

})

...

}

export default BmiCalculator

JSX

Collapse

2. Tips for using the Effect Hook

2.1 Using Multiple useEffects to Separate Concerns

Just like useState, you can also use multiple useEffects to separate unrelated logic into different effects based on what it is doing

File: src/components/BmiCalculator/index.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

...

const BmiCalculator = () => {

...

useEffect(() => {

document.title = `Your BMI: ${getBmi(weight, height)}`

})

useEffect(() => {

localStorage.setItem("weight", JSON.stringify(weight))

})

useEffect(() => {

localStorage.setItem("height", JSON.stringify(height))

})

...

}

export default BmiCalculator

JSX

Collapse

2.2 Optimizing Performance by Skipping Effects

In some cases, executing the effect after every render creates a performance problem, It can be optimized by Skipping the effect when it is not required

The

useEffect

accepts another argument called Dependency Array, using which we can control the execution of effect

Syntax:

1

useEffect(effect, [var1, var2, ...])

JSX

• The values we pass to the dependency array are called dependencies, which can be state variables or props
• Effect will be executed whenever the dependencies are changed

Without Dependencies

The Effect executes after every render

1

useEffect(effect);

JSX

Passing Empty Dependency Array

The Effect executes only once after the first render

1

useEffect(effect, []);

JSX

Passing Dependencies

The Effect executes when dependencies are changed

1

useEffect(effect, [var1, var2,...])

JSX

File: src/components/BmiCalculator/index.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

...

const BmiCalculator = () => {

...

useEffect(() => {

document.title = `Your BMI: ${getBmi(weight, height)}`

}, [height, weight])

useEffect(() => {

localStorage.setItem("height", JSON.stringify(height))

}, [height])

useEffect(() => {

localStorage.setItem("weight", JSON.stringify(weight))

}, [weight])

...

}

export default BmiCalculator

JSX

Collapse

3. BmiCalculator Application Code

Use the below command to get the Final Code for BmiCalculator Application

1

ccbp start RHSIVTWEU5

SHELL