When to use classes and functional components in React!

When I started coding in React I would always wonder why everything didn’t just use a class component when coding, it would make life a lot easier to follow I use to think. But, I learned that they have advantages of using each type when needed.

React’s project architect is very important when handling state. State is an object that represents the parts of the app that can change. Each component can maintain its own state, which lives in an object called “this”. State can be passed down from one component to another depending on the architecture of the project. When state is passed down through components, the child components refer to state as props.

Functional components are basic arrow functions from Javascript. These functions are stateless components because they cannot accept data and display them in some form, these are mainly used for rendering UI. React lifecycle methods such as componentDidMount cannot be used in functional components, and there are no rendering method used inside of these components. Functional components can accept and use props. They are mainly responsible for UI and presentational only for things like form inputs, and buttons.

Example of functional component:

const FormInput = ({ handleChange, label, ...otherProps }) => (
<div className='group'>
<input className='form-input' onChange={handleChange} {...otherProps} />
{label ? (
<label
className={`${
otherProps.value.length ? 'shrink' : ''
} form-input-label`}
>
{label}
</label>
) : null}
</div>
);

As you can see from the code above, I pushed inside a function, as well as other props as an argument.

Class Components make use of ES6 class and extends the component class in React. You can use state as well as implement some logic in these components. React Lifecycle methods can be used in these class components. You may also use all of React lifecycle methods and pass the state down so that they are received as props inside of child components.

Example of class component:

class SignIn extends React.Component {
constructor(props) {
super(props)
this.state = {
email: '',
password: ''
}
}
handleSubmit = event => {
event.preventDefault()
this.setState({ email: '', password: '' })
}
handleChange = event => {
const { value, name } = event.target
this.setState({ [name]: value })
}
render() {
return (
<div className='sign-in'>
<h2>I already have an account</h2>
<span>Sign in with your email and password</span>
<form onSubmit={this.handleSubmit}>
<FormInput
name='email'
type='email'
handleChange={this.handleChange}
value={this.state.email}
label='email'
required
/>
<FormInput
name='password'
type='password'
value={this.state.password}
handleChange={this.handleChange}
label='password'
required
/>
<submit type='submit'> Sign in </submit>
</form>
</div>
);
}
}

As you can see from my class component, it deals with the state, passing down a function like handleChange to its child, as well as custom FormInput. You can also see custom logic for setting the state of the input, as well as rendering form and words onto the screen.

--

--

--

Problem solver with experience in Software, and Mechanical engineering. Interested in web-dev, machine learning, artificial intelligence, and new technologies.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Making a d3.js scatter-plot interactive — part two

Why I Made My Own Code Quality Tool, Attractor

Functional Programming in JavaScript

How to Validate an Email Address in Node.JS

Detect Dangerous Spring Service Exporters With CodeQL

Implementing Push Notification in iOS apps using Firebase Cloud Messaging

Push notification on iOS devices

How to intercept a callback function in JS, i.e. modifying module function for your need

CS50 PSET5: Speller.c

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Avitosh Totaram

Avitosh Totaram

Problem solver with experience in Software, and Mechanical engineering. Interested in web-dev, machine learning, artificial intelligence, and new technologies.

More from Medium

React Components(React Bileşenleri)

How to listen to Formik onChange event in React?

React: How To Dispatch A Redux Action With A Timeout?

React -TypeScript — How to add interface with functional component typed props beginner guide :)

Typescript, PropType , React js