Stateful Stateless Dumb Components & Function Component vs Class Component - Part One

!!! MOST IMPORTANT REACT TUTORIAL !!!
REACT JS COMPONENTS KEY CONCEPTS.
WATCH IN FULL SCREEN MODE.

*** Part Two ***
https://www.youtube.com/watch?v=kApjWnAZBR0

If you have been using react for a while and still struggle with different ways of using components, this video will help you. There are class components and function components. There are a lot of ways you can write a function component. And there lies the confusion. Class component is straight forward. You call a class based component as class component. Why do you use class based component? You use react class component so that:

1- You can use state for component inside constructor.
2- You can use component life cycle methods such as componentDidMount, componentWillUnmount and so on.

You don't need class based components anymore. Because we have got react hooks. You can use react hooks like useState and useEffect to define state and access component life cycle methods. It is recommended that you use function components in react as much as possible and avoid class components.

Class is an object that stores data and functions. Class stores data such as state, inside constructor. By definition, A class is like a blueprint from which a house is built. In JavaScript there are no classes. Instead, each object can function as a class. Every object can be useful on its own or it can serve as a template for other objects. An object is a collection of functions and data.

Almost everything in JavaScript is either an object or a function. React JS is about functional programming - the way of programming in which you use functions. Function component is a function and a class is an object.

So what is function component?
Is it Stateless Component?
or a Dumb Component?
or Functional Component?
or Function Based Component?
or Function Component?

Most function components are dumb components or stateless components. Function components can be stateful components too - with help of react hooks. Components that don't change are dumb components. Components that don't have state are called dumb component. Dumb components just sit there, receive properties or props and use those properties - and that's it.

Give this video a LIKE
SUBSCRIBE to Channel if you haven't already
Hit BELL icon to receive updates
Share your thoughts in comments
Share our videos on social media platforms
Give us feedback

Tell us what should we cover for you. Ask programming, web development, software engineering, frameworks related questions.
Thanks for watching!
Stay tuned!

Channel: https://www.youtube.com/webstylepress
Website: https://www.webstylepress.com
FaceBook: https://www.facebook.com/webstylepress/
Twitter: https://twitter.com/webstylepress
Instagram: https://www.instagram.com/webstylepress
LinkedIn: https://www.linkedin.com/company/webstylepress
GitHub: https://github.com/webstylepress
#react #reactjs #js #javascript #webdevelopment #webstylepress #class #comparison #function #functions