Member-only story

Difference between “function component” and “class component”

Shiori Soma
2 min readJul 10, 2021

--

Photo by Nikola Johnny Mirkovic on Unsplash

Different usage of “State”.

Class Component

State is used for values that are used for display
Values that are not used for display are stored as properties.

Function components

Basically, all values used in a component are stored as a state.
All values that are not used for display but are retained in the component should be stored as a state.

Function components are always reloaded.

Class components are kept in state.

A class creates an instance, that is always stored in memory and keeps its contents while the program is running.
So, even if you don’t use state, if you store a value in a property, it will be retained until the page is reloaded.

Function components are not stored.

Functions are called and executed when they are displayed or updated, and that’s it.
They are not always kept in the same state as class components but are called as needed.
In other words, they are not always running.

--

--

Shiori Soma
Shiori Soma

Written by Shiori Soma

I’m a front-end web developer based in Vancouver, studying CICCC, an web and mobile app development course. https://shiory602.github.io/portfolio/

No responses yet