Lets Talk About the useEffect HOOK!

Intro:

Following on from last week’s post about the ‘useState’ hook, I thought it would be good to move onto the useEffect hook!!!

Again, the React Docs are a great place to find out more!!

I’m just aiming to boost my own, theoretical understanding of React and to then deliver it to you!!!

As always, before we get into the post; make sure to applaud and share this post with your friends!!!

What Does ‘useEffect’ Mean?

It’s a piece of code that runs once when the component loads OR on a given dependency.

It allows you to ‘perform side effects’ in functional components, without the need for a class.

It replaces the need to use methods such as ‘componentDidMount’ , ‘componentDidUpdate’ and ‘componentWillUnmount’.

Here is the typical structure of a useEffect:

useEffect(() => {

FUNCTIONALITY GOES HERE!!

}, DEPENDENCY)

Examples of Dependencies:

None

[]

[variable]

Cleanup.

No-Clean-up.

Functional Components Example:

To summarise, this code updates the title of the browser with the number of clicks, each time it changes (the components re-renders).

We place the useEffect inside the functional component so that it access the state.

Class Based Component Example:

Remember that hooks are used on Functional Components!!

Earlier I referred to 3 methods: ‘componentDidMount’ , ‘componentDidUpdate’ and ‘componentWillUnmount’. Lets get some definitions for them!

componentDidMount() — This method is called after a component is rendered.

componentDidUpdate() — This method is called when a component is updated (e.g. a value, the dependency, changes).

componentWillUnmount() — This is the ‘clean-up’ method for Class Based Components.

We have to DUPLICATE the code!!!

Clean-up:

Aims to prevent memory leaks.

Class-Based Example:

componentDidMount() and componentWillUnmount() mirror each other to maintain the correct logic.

Functional Components Example:

Returning a function is the best way to clean-up.

The clean-up occurs when the component ‘unmounts’.

No-Clean-up:

Referencing the docs:

‘

Sometimes, we want to run some additional code after React has updated the DOM. Network requests, manual DOM mutations, and logging are common examples of effects that don’t require a clean-up.

We say that because we can run them and immediately forget about them. Let’s compare how classes and Hooks let us express such side effects.

’

Tips:

Use ‘useEffects’ to ‘separate concerns’

Final Things:

This is such a big topic that I would highly recommend that you look at the docs!!!

As always, remember to applaud and share this post, helping it reach more people!!!

Follow Vikram Nayyar CS on all platforms!!!

Hashtags:

#computerscience #coding #programming #technology #python #programmer #computer #developer #tech #coder #java #javascript #code #codinglife #webdeveloper #softwareengineer #html #machinelearning #softwaredeveloper #programmers #software #engineering #linux #programmingmemes #artificialintelligence #datascience #computerengineering #cybersecurity #hacking #bhfyp