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.