4 Ways of creating React Components

#webdev #react #codenewbie #programming

Most developers probably know only the 2 most fundamentals types of components. But technology is developing every day, right? And now there are 4 types.

To be relevant, we must keep our tech skills up-to-date ;)

Functional Components

Also called dull or template components, their main purpose is to receive props/return JSX.

Use more as possible

import React from 'react'; 
const HelloWorld = () => {
    return (
    <span>Hello!</span>
    )
}

export default HelloWorld;

Class Components

They can do everything a functional component does, but more. Also called smart components. they can receive props, have state and lifecycle methods. We use and connect all functional components. Here, in our smart components.

Not everyone is a king. Use as less as possible

import React from 'react'; 
class HelloWorld extends 
React.Component {
    // LOGIC HERE
    render() {
        return (
        <span>Hello!</span>
        )
    }
}

export default HelloWorld;

Pure Components

This is generally used for optimizing the application. The pure components are also used for increasing performance as it works like shouldComponentUpdate() lifecycle methods which will reduce the number of operations in the application.

Essential component type which I suggest using basically when building larger apps

class example extends 
    PureComponent () {
        return (
        <Text>
        {this.props.text}
        </Text>
     ); 
  }

High-Level Components (HOC)

Advanced technique in React for reusing component logic. HOCs are functions that return component (s). They are used to share logic with other components.

You can use to 'hack' the rule that you can only return one JSX element from a component

import React from 'react'; 
import MyComponent form './path'

class HelloWorld extends 
    React.Component {
        render() {
            return (
            <div>
                {this.props.myArray.map((el) => (<Comp data={el} key={el.key} /> ))}
                </div>)
        }
    }
export default HelloWorld;

📘Thanks For Reading | Happy Coding ☕

Get weekly newsletter of amazing articles I posted this week and some offers or announcement. Subscribe from Here

Top comments (3)

🚩 Atul Prajapati 🇮🇳 • Feb 21 '21

Hey, Rahul thanks :) for sharing this component variation. Actually, it's hidden confusion for newbies which takes time to understand them but after reading this post everything is cleared. Thanks a lot for this post but sorry I can't a pizza for you sorry for that :(