Handling state in React class components vs functional components

Hi guys! :slight_smile:

I have a quick question about handling state in React with Redux.
Am I right in thinking that if all state is handled within the Redux store then all React components only need to be functional components?
And if a component should require some local state for whatever reason then that component should be a class component to allow for this?


Generally speaking the community as well as React itself is pushing towards functional components.
React 16 introduced Hooks that lets you define states in function components, so there are very few reason to choose a classes.

Besides this, you are generally right in your assumption: have your state managed by Redux if you like, and switch to a traditional approach as you see fit.

Though react is moving towards functional components as highlighted by @Marmiz, you can use redux with both functional and class based components. Essentially both can have their own local state in addition to global redux store which any component can subscribe to.

Thanks Marmiz :+1:
Will have a look for myself in a mo, but if you happen to know any good sources for learning how to use these Hooks alongside Redux to define states in functional components then please let me know :slight_smile:

I think the documentation does a great job at explaining how hooks works.
Beside that, there’s not really much to learn about them, if you already have a solid understanding of react in general (lifecycles, context, refs…).

As it states in the introduction:

Hooks don’t replace your knowledge of React concepts. Instead, Hooks provide a more direct API to the React concepts you already know: props, state, context, refs, and lifecycle. As we will show later, Hooks also offer a new powerful way to combine them.

Excellent :slight_smile: Will read up now, thank you

It’s just a slightly different API, class and functional components work the same and now provide the exact same functionality. As mentioned, the community is moving away from the class-based API.

You generally want state handled as close to where it’s used as possible. Redux is normally used when you have complex state that needs to be kept in one place that the rest of the app needs to access (data from lots of different API calls for example). It’s not just used to replace all the state in an app.

Thanks Dan,
yes it seems from reading the documentation as though the hooks pretty much replace the classed based API, and look more straight forward to use in my opinion. Is there a scenario when it would still be necessary/recommended to use a class component over a functional component?

Yes still trying to get a feel for when to use Redux and when not to. At the moment I’m building a simple App and utilising Redux simply because I want to learn how it works, however I’m sure it’s unnecessary.

However, unless you have a component or components that contain data unrelated to any other component, would it not be wise to store all state in the redux store anyway? That way any state that could be useful for another component is there whenever you need it - and having it all in one place is potentially better for debugging ? Can use browser plugins for time travel debugging for example.
Please tell me if I’m mistaken here! Just reading lots and trying to figure out best ways of doing thing :slight_smile: