React Concepts

** PropTypes in React**

PropTypes are a mechanism to ensure that components use the correct data type and pass the right data, and that components use the right type of props, and that receiving components receive the right type of props.

We can think of it like a puppy being delivered to a pet store. The pet store doesn’t want pigs, lions, frogs, or geckos — it wants puppies. PropTypes ensure that the correct data type (puppy) is delivered to the pet store, and not some other kind of animal.

In the section above, we saw how to pass information to any component using props. We passed props directly as an attribute to the component, and we also passed props from outside of the component and used them in that component. But we didn’t check what type of values we are getting in our component through props or that everything still works.

It’s totally upon us whether to validate the data we get in a component through props. But in a complex application, it is always a good practice to validate that data.

USING PROPTYPES #

To make use of PropTypes, we have to add the package as a dependency to our application through npm or Yarn, by running the following code in the command line. For npm:

npm install --save prop-types

To use PropTypes, we first need to import PropTypes from the prop-types package:

import PropTypes from 'prop-types';

Let’s use ProTypes in our app that lists users’ posts. Here is how we will use it for the Post component:

Post.proptypes = {
id: PropTypes.number,
content: PropTypes.string,
user: PropTypes.string
}

Here, PropTypes.string and PropTypes.number are prop validators that can be used to make sure that the props received are of the right type. In the code above, we’re declaring id to be a number, while content and user are to be strings.

Also, PropTypes are useful in catching bugs. And we can enforce passing props by using isRequired:

Post.proptypes = {
id: PropTypes.number.isRequired,
content: PropTypes.string.isRequired,
user: PropTypes.string.isRequired
}

PropTypes have a lot of validators. Here are some of the most common ones:

Component.proptypes = {
stringProp: PropTypes.string, // The prop should be a string
numberProp: PropTypes.number, // The prop should be a number
anyProp: PropTypes.any, // The prop can be of any data type
booleanProp: PropTypes.bool, // The prop should be a function
functionProp: PropTypes.func // The prop should be a function
arrayProp: PropTypes.array // The prop should be an array
}

** React JSX**

All of the React components have a render function. The render function specifies the HTML output of a React component. JSX(JavaScript Extension), is a React extension which allows writing JavaScript code that looks like HTML. In other words, JSX is an HTML-like syntax used by React that extends ECMAScript so that HTML-like syntax can co-exist with JavaScript/React code. The syntax is used by preprocessors (i.e., transpilers like babel) to transform HTML-like syntax into standard JavaScript objects that a JavaScript engine will parse.

JSX provides you to write HTML/XML-like structures (e.g., DOM-like tree structures) in the same file where you write JavaScript code, then preprocessor will transform these expressions into actual JavaScript code. Just like XML/HTML, JSX tags have a tag name, attributes, and children.

Why use JSX?

o It is faster than regular JavaScript because it performs optimization while translating the code to JavaScript.
o Instead of separating technologies by putting markup and logic in separate files, React uses components that contain both. We will learn components in a further section.
o It is type-safe, and most of the errors can be found at compilation time.
o It makes easier to create templates.

** Hooks**

Hooks are the new feature introduced in the React 16.8 version. It allows you to use state and other React features without writing a class. Hooks are the functions which "hook into" React state and lifecycle features from function components. It does not work inside classes.
Hooks are backward-compatible, which means it does not contain any breaking changes. Also, it does not replace your knowledge of React concepts.

Rules of Hooks

Hooks are similar to JavaScript functions, but you need to follow these two rules when using them. Hooks rule ensures that all the stateful logic in a component is visible in its source code. These rules are:

Only call Hooks at the top level

Do not call Hooks inside loops, conditions, or nested functions. Hooks should always be used at the top level of the React functions. This rule ensures that Hooks are called in the same order each time a component renders.

Only call Hooks from React functions

You cannot call Hooks from regular JavaScript functions. Instead, you can call Hooks from React function components. Hooks can also be called from custom Hooks.

Built-in Hooks

Here, we describe the APIs for the built-in Hooks in React. The built-in Hooks can be divided into two parts, which are given below.

Basic Hooks
• useState
• useEffect
• useContext
Additional Hooks
• useReducer
• useCallback
• useMemo
• useRef
• useImperativeHandle
• useLayoutEffect
• useDebugValue