PropTypes:
PropTypes are a mechanism to ensure that components use the correct data type and pass the right data, that components use the right type of props, and that receiving components receive the right type of props.
PropTypes was used to validate the structure of props passed into React components.
PropTypes are a way to validate the values that are passed in through our props. node We can pass anything that can be rendered such as numbers, string, DOM elements, arrays, or fragments that contain them using the React.
State-props:
Props are external and controlled by whatever renders the component. The State is internal and controlled by the React Component itself.
State is a plain JavaScript object used by React to represent information about the component's current situation. It's managed in the component. Props are arguments passed into React components. Props are passed to components via HTML attributes.
JSX:
JSX stands for JavaScript XML. It is simply a syntax extension of JavaScript. It allows us to directly write HTML in React.
It is easy to create a template using JSX in React, but it is not a simple template language, instead it comes with the full power of JavaScript. A JSX expression starts with an HTML-like open tag, and ends with the corresponding closing tag.
JSX tags support the XML self close syntax so you can optionally leave the closing tag off.
Component Lifecycle:
Each component in React has a lifecycle which you can monitor and manipulate during its three main phases.
The three phases are: Mounting, Updating, and Unmounting.
Mounting:
Mounting means putting elements into the DOM.
React has four built-in methods that gets called, in this order, when mounting a component:
constructor()
getDerivedStateFromProps()
render()
componentDidMount()
Updating:
The next phase in the life cycle is when a component is updated.
A component is updated whenever there is a change in the component's state or props.
React has five built-in methods that gets called, in this order, when a component is updated:
getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()
Unmounting:
The next phase in the life cycle is when a component is removed from the DOM, or unmounting as React likes to call it.
React has only one built-in method that gets called when a component is unmounted:
componentWillUnmount()
hooks:
Hooks allows you to use state and other React features, like lifecycle methods.
with the new update, you can just use a Hook inside the function component, making the refactoring procedure easy.
Types of hooks:
State Hook: UseState to be using the same functionality given in a class by this.state. This enables to maintain
a local state in a functional component.
Effect Hook: You could think of using Impact Hook as a combination of componentDidMount, componentDidUpdate, and
componentWillUnmount, if you are familiar with the React class lifecycle methods.
Context Hook: UseContext is an incredible way to eliminate the complexity of data transmission to the various levels
in the hierarchy through props, even if it is unnecessary.
custom hooks:
Custom Hook is a JavaScript function which we create by ourselves, when we want to share logic between other JavaScript functions.
It allows you to reuse some piece of code in several parts of your app.
Top comments (0)