Components in React

In this article, we will try to understand the basic between both type of component and which one you should use. Let's begin.

what are components ?

Components are the core building block of React. They are independent and reusable piece of code that describe the part of your UI. Application's UI can be split into smaller component where each component has its own structure and code.

what are Props and State ?

Components need data to work with. And props and state determine what components renders and behaves. Let's understand props first.

Props

"Props" is special keyword in React, which stands for properties and is used to pass data from one component to another. But the important part is that data is passed in uni-directional flow.( from parent to child).

In simple term, props are nothing but input to the component.

parent component

class parent extends Component {
  render() {
    return (
      <div>
        <h1>I'm the parent component.</h1>
        <Child name="first" />
        <Child name="second" />
      </div>
    );
  }
}

Child component

const Child = (props) => {
  return <p>I'm the `${props.name}` child!</p>;
};

State

State on other hand, is an object that is owned by the component and its scope is limited to the current component.

when the state object changes, the component re-renders

Class component vs functional component

React component can be of two types, class component or functional component. The difference between the two is obvious from their names.

Functional Components.

Functional components are just JavaScript functions. They take an optional parameter as input called props.

function example() {
  return (
    <div>
      <h1>"I am functional component"</h1>
    </div>
  );
}

ES6 arrow functions are preferred for defining components. Arrow functions is more compact way of writing function expression. By using arrow function we can eliminated the use of two keywords, function and return.

Arrow Function

const hello = ({hello}) => (<div>{hello}</div>;

Class Components.

class components are little more complex but offers more functionality. The primary feature to choose class components over functional component is that they can define state.

There are two ways to initialize state in React component: inside the constructor and directly inside the class.

Inside the constructor.

class Hello extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            greeting: "hello"
            }
    }

    render() {
        return(
            <div>
                {this.state.greeting}
            </div>
        )
    }
}

Directly inside the class

class App extends React.Component {
  state = {
    greetings:"hello"
  }

  render() {
    return(
            <div>
                {this.state.greeting}
            </div>
        )
  }
}

Conclusion

There are pros and cons to both the styles but functional component is the way to go because it shorter and simple, which makes it easier to understand, develop and test. Class components can make the development confusing with so many uses of this. Over the years react team in supporting more React hooks for functional components that replace or even improve upon class components.

There are lot of valid coding styles in React. Yet I am biased with functional components for the reasons I listed above. I hope this article helped you understand the basic of react.

Kamal Patel