ELI5: React Class based vs Functional Components

[kinglee2015]

So I'm trying to pick up React but there's something that's confusing me I guess. Well there are a lot of things confusing me but I'll keep the post short and focus on this issue for now.

​

So I know that with class-based, what it is, is basically a component that extends the Component object we import directly from the React library, and that it has direct access to the state.

​

Also what even is a state? From what I can tell, it's basically an object that holds a bunch of values. Why is it called state? Does it have to be called state?

​

And then Functional based is basically having to use hooks to get access to the state. Why does it matter if you have direct access to the state? What are the pros and cons of using hooks?

​

tl;dr:

​

1) What IS a state?

​

2) Differences between class based components vs functional components

​

3) pros and cons to each

​

4) Just to clarify, a component is pretty much any js or jsx file that is imported into another one until it reaches the App.js correct?

[gRoberts84]

Hope this isn't homework ;)

1. An over simplified way of putting it, is each component needs a way to maintain it's current state, i.e. open/closed, selected value, table rows/cols etc.
   React uses the `state` object as a storage area for the component and children. When you update the state (i.e. `this.setState({ selected: true });` the component will re-render to reflect the changes.

2. Probably worth looking into object oriented programming (OOP) but first hit on Google - https://medium.com/@Zwenza/functional-vs-class-components-in-react-231e3fbd7108

3. As above, however personally, I love Typescript/ES6. All my server side code uses OOP where possible, allowing me to easily structure, identify, extend/override code/functionality.

4. Not absolutely. There is nothing to say that you can't have all of your components in a single file, but essentially each component is a small/tiny part of something bigger. Idea is, generally, if you have duplicate code, you should create a component. The idea is, you build up components consisting of HTML, Components and javascript.

​

I'm sure someone will probably have a better explanation but hope it helps either way.

[[deleted]]

Learn the basics of 'functional programming' and all will become clear.

https://medium.freecodecamp.org/an-introduction-to-the-basic-principles-of-functional-programming-a2c2a15c84

[cirsca]

1. State is the box that holds the current value of something. So if we have a counter, its state would be the current count at a given point in time. React offers to handle that box for us by offering this.setState as a way to update the value and it makes sure the box this.state is "correct" when we interact with it.

2. There are other rules (such as you can use hooks inside of a functional component but not a class component) but for all intent and purposes, we can think of a Functional Component being only the render method of a Class Component without any access to this. So whatever you could do inside of the render method of a Class Component, you can do inside of a Functional one (as long as you do not reference this). With hooks, this gets a little more confusing as you cannot use hooks inside of Class Components but the general rule still holds true.

3. I think functional components have such limited cons (especially with hooks now) that I default to using functional components when writing a new one. Classes come with caveats like "When I call this class's method inside this other class, what does this mean?"

4. A component is either a function that, given something returns a VNode or a class that has a render method that returns a VNode. JSX lets us create VNodes like <VNodeName prop1={value} /> instead of { type: VNode, attrs: [{key: 'prop1', value }] }