Deciding which React Component to use

There are certain factors to consider when deciding what component type a Component should be.

You ideally want to use the lightest tool for each particular task.

Disclaimer. There is no set in stone rule for deciding on a React Component. It is an entirely situational decision that varies from Component to Component.

Writing this as a means of reference, not a doctrine to live by.

Types of Components

There are 4 types of components that you are likely to come across in React.

1. Class — an ES6 component extending React’s own Component class. Has access to State, and all of React lifecycle methods.
2. Functional — a function returning JSX. Originally used for strictly presentational purposes. However, with the introduction of Hooks, these can now have access to State and lifecycle methods.
3. Component using managed state — when using a state manager like Redux, your entire application will be connected to your state store, though you should only connect components that need access to this store. Can either be a Class Component or a Functional Component using Hooks.
4. createReactClass — if for some unfortunate circumstance you find yourself developing without ES6.

When to Use What

Below is a situational flow chart with key questions to ask yourself.

Deciding on a component type is often a fluid process that ends with future refactoring.

It is an entirely situational decision, though there are common questions you can ask yourself to help narrow down your choices.

Feel free to add any suggestions in the comments.

Thanks for reading!