Understanding Different PropTypes in ReactJs

In React, Props stands for ‘Properties’. Their purpose is to send data from one component to another. When a wrong prop is received by a component, bugs and unexpected errors might occur in the app.

There is no in-built type checking solution in JavaScript, therefore, developers use extensions such as TypeScript and Flow. However, there is an internal mechanism in React for props validation. It is known as React PropTypes.

PropTypes makes use of one-directional data flow (parent-to-child). However, with a callback function, it’s possible to pass props back from a child to a parent component.

You can transfer different types of data such as numbers, strings, arrays, functions and objects. We can pass props to any component, just as we can declare attributes in any HTML tag.

For example: <PostList posts={postsList} />

In this code, a prop named ‘posts’ is being passed to a component named PostList. The value of the prop here is {postsList}.

PropTypes are also objects like defaultProps. Here, the keys are the prop names and values are their types.

Syntax:

We have learned that Props are used in React to pass information to a component. They are like function arguments in JavaScript and attributes in HTML.

Most often Props are immutable. This means that you cannot modify them from inside the component. If you need immutable data in the component, you have to add props to reactDom.render() method in the main.js file of your ReactJS project.

Default Props

There’s an option of setting default props in the component constructor. It is not always necessary to add props in the reactDom.render() element.

Example

App.js

import React, { Component } from 'react';  

class App extends React.Component {  

   render() {     

      return (  

Default Props Example

Welcome {this.props.name}            

Today we will learn React.

        ); 

    }  

}  

App.defaultProps = {  

   name: "React"  

}  

export default App; 

Main.js

import React from 'react';  

import ReactDOM from 'react-dom';  

import App from './App.js';  

ReactDOM.render(, document.getElementById('app'));

The concept of unidirectional data flow is not unique to React but if you’ve always been associated with JavaScript, you might not have heard it before. As the name suggests, it means that there is only one way to transfer data to different parts of an application. 

In other words, you can understand it as the inability of child components to update the incoming data from parent components. In the context of React unidirectional data flow means that:

• State is passed on to the view and child components

• Actions are triggered by the view

• Actions are capable of updating the state

• Change in state is passed to the view and child components

You can understand this flowchart as: View is the result of application state. There’s a change in the state when an action takes place. This action causes the state to update.

It is important to note that React doesn’t support bi-directional binding. This ensures that a clean data flow is maintained. One of the major benefits of having a unidirectional data flow is that data flows in one single direction throughout the app. This also gives programmers better control over the application.

Here are some other benefits of unidirectional data flow in React:

• It makes it easy to debug as the programmers know where the data is coming from and can easily trace the data

• There are less chances of errors as programmers have better control over data and application

• It is more efficient

The effect of unidirectional data flow is seen in changes made by any state. Since a state is owned by one single component, it has an impact on its children, i.e. the elements below it. 

There is no effect on the parent or sibling component. Now you understand why a state is moved up in the component tree? Because it can be shared with all the components (child components) below it that need access.