Components in React: "class" and "functional"
If you're creating a non-trivial webpage it might feel like it's getting out of hand. Changes coming in from different places. CSS files. JavaScript files. HTML files. One "thing" on your page might have code coming from seven different files. This can be confusing, not to mention it and makes reusability and testing difficult.
React addresses this complexity. It lets you make up your own tags for your specific use case. Not only that, but you can include everything the tag needs to make it work in one place. It's like a layer on top of JavaScript / HTML / CSS that lets you build your own reusable, modular, domain-specific components. And that's a central React idea: components.
These components are like your own reusable HTML tags that also encapsulate whatever JavaScript (and HTML, and CSS, and other components, etc) they need to run. There are two main ways to create components in React: class and functional.
Also there are two "rules of hooks." First, hook call must only be from the top level - no loops, conditionals, or nested functions. Second, only call hooks from React components or other custom hooks - not from regular JavaScript functions. You can find more about hooks here in the docs.
React addresses this complexity. It lets you make up your own tags for your specific use case. Not only that, but you can include everything the tag needs to make it work in one place. It's like a layer on top of JavaScript / HTML / CSS that lets you build your own reusable, modular, domain-specific components. And that's a central React idea: components.
These components are like your own reusable HTML tags that also encapsulate whatever JavaScript (and HTML, and CSS, and other components, etc) they need to run. There are two main ways to create components in React: class and functional.
Class Components
The component method of creating classes is based on the extension of the React Component class. Extending an existing class brings along several useful items: a constructor, state management, and some life cycle handles. (If you don't need these extra features for a simple component, you can use the functional version discussed below.) The output of the class component is the render() method. Typically, you override the render() method and return something that will be returned to the browser for display. You can also override other methods from the extended class: componentDidUpdate() which fires after the components is loaded onto their browser. So when do you use class components?It's for is work. For more information see the docs.Functional Components
The other method of creating components in React is functional. You just create a function that returns something to display. Differences? First, you won't see the class and extend keywords in it's definition. Second, it does not include a render() method, but just returns the result to be rendered. Third, it does not have a constructor. Fourth, it does not track it's own state - an important feature of React: state Management. For this last item, these functional components have been known as stateless components. However, since 16.8 there is a feature called "hooks." Hooks let these lightweight components have their own state (among other features) without the weight of of a class.Hooks for Functional Components
"Hooks don’t work inside classes. But you can use them instead of writing classes." - docsSo hooks give some classy features to functional components. Hooks cannot be used in classes. Two important hooks that come along with React are useState and the useEffect. The useState hook let's functional components have state like a class component. The useEffect hook lets your code perform side effects.
Also there are two "rules of hooks." First, hook call must only be from the top level - no loops, conditionals, or nested functions. Second, only call hooks from React components or other custom hooks - not from regular JavaScript functions. You can find more about hooks here in the docs.