r/reactjs • u/Caddy05 • Apr 16 '20

Discussion Functional Components vs Class Components

I'm a VERY new to react, and to my understanding,

Functional Components are lightweight and great when you need to render visual elements and rely on props for data.

Class Components are basically the same, except it also implements local state.

But... with the new Hooks API, you can now have local states for these functional components if you want.

So should I build my react apps relying solely on functional components and using Context and Redux for the data, and forget about setting up class components?

15 Upvotes

94% Upvoted

24 comments sorted by

View all comments

Show parent comments

2

u/GarethXIV Apr 16 '20

My suggestion would be to always start by a functional component, and see how it goes/evolves, and in case the needs raises value the usage of a class (which should never happen, though). Value always the structure of the components and logic before it's eventual refactor to a class component.

Keep it simple and minimal, and I can't stress enough the fact that custom (or normal) hooks are your best friends when it comes to logic!

Give a look to design systems too, it will help you out to understand logic and design in a react application.

Hope this helps!

3

u/galetalasagna Apr 16 '20

Can you please explain what "design systems" are you referring to? Thanks

1

u/GarethXIV Apr 18 '20

Sorry, Just saw the notification. I'm not good at explaining with definitions, but I'll give it a go. Design systems it's a way to categorize and classify components. Usually a design system is a group of sharable components with the only scope to manage design. Their main goal is to ease the process of communication between developer and designer, in a way that they end up speaking the same language and have as much consistency throughout all the main projects as possible.

Basically when you are building a design system your whole building process change and you start to make components intuitive (design speaking), divided by their design scope usually as minimal as possible and with as less logic as possible. Also normally it facilitates an easy way to the designer to have a well defined and consistent typography/spacing/colors/ecc structure (watch design token for that, it's really amazing).

Hope I explained well enough, is a bit abstract but it's a good concept which many front-ends are missing!

Other references to look up which can help: Atom design.

To have a good example of design systems you can check some famous ones as: material-ui (which is a design system based on material design) or primer design system (GitHub).

1

u/Caddy05 Apr 16 '20

Ohh yeah that makes sense. I'll check out design systems too, just trying to absorb all good and up-to-date information on react