Important topic of React that you can’t Ignore!

PropTypes

PropTypes is an Internal mechanism of react for adding type checking to components.This mechanism also ensures that the component uses the correct data type and passes the right data in different forms like numbers, strings, arrays, functions, objects, etc.It is also one of the good way to validate the data we get as props by using propTypes.

Example

class MyApp extends React.Component {
render() {
return {

Some value: {this.props.value}

} }}
// Add proptype for "value"
MyApp.propTypes = {
value: PropTypes.number
};

Props vs State

Props

• Props are read-only.
• Props are immutable.
• Props allow you to pass data from one component to other components as an argument.
• Props can be accessed by the child component.
• Props are used to communicate between components.
• Stateless components can have Props.
• Props make components reusable.
• Props are external and controlled by whatever renders the component.

State

• State changes can be asynchronous.
• State is mutable.
• State holds information about the components.
• State cannot be accessed by child components.
• States can be used for rendering dynamic changes with the component.
• Stateless components cannot have State.
• State cannot make components reusable.
• The State is internal and controlled by the React Component itself.

JSX

JSX is a Javascript syntax extension which allows us to write html structures code into a javascript code file.It also makes our code simpler so that it can be easily readable.JSX will throw useful errors if HTML is not correct.
Point to be noted if you are using JSX it will be inside curly braces{ }

Example

const element = (

Hello!

Good to see you here.

);

Component Lifecycle

A react component through goes four stages in its lifecycle which are given below:

• Mounting=In this phase where a component has been created and inserted into a dom.
• Updating=It will be called when a component re-rendered as a result of changes to state or props.
• Unmounting=When a component is being removed from dom.
• Error handling=It will be called when errors occur during rendering in the lifecycle or in the constructor of the child component.

Hooks

Hooks are useful features of react which allow us to use state and other features of react like lifecycle method ,without writing the class.Basically it will not work inside components.

Example

useState,useEffect are some of the examples of hooks.

You can create your own and can reuse stateful behaviour to other components.

custom hooks

The purpose of a custom hook is that it can call other hooks and allow us to have cleaner functional components so that it prevents code duplication by bringing common use cases .We can create this hook ,share logic and data with other components by reusing it.’use’ keyword should be introduced before it.

Example: useContext

context API

Context API is a system where data passes directly from parent components to child without having to pass data down manually at every level.When a child component requires data, the Provider component sends it to the child component at any level.

_Example
_
import ColorContext from './ColorContext';
function App() {
const color= "white";
return (

Welcome to my web page

);
}

React Application Optimization

We can optimize react js application in different ways:

• Using React.memo boost the app as it is a higher order component.
• Using keys of each component will help us to avoid re-renders.
• Need to pass objects as properties so that no unintentional re-renders will happen.
• It would be ideal not to make changes in Dom tree structure.