React Blog

REACT CONCEPTS

Proptypes :

PropTypes is React’s internal mechanism for adding type checking to components. React components use a special property named propTypes to set up type checking.
/**

FUNCTIONAL COMPONENTS */ function ReactComponent(props) { // ...implement render logic here }

ReactComponent.propTypes = {
// ...prop type definitions here
}

/**

CLASS COMPONENTS: METHOD 1 */ class ReactComponent extends React.Component { // ...component class body here }

ReactComponent.propTypes = {
// ...prop type definitions here
}

/**

CLASS COMPONENTS: METHOD 2
Using the static class properties syntax */ class ReactComponent extends React.Component { // ...component class body here

static propTypes = {
// ...prop type definitions here
}
}
When props are passed to a React component, they are checked against the type definitions configured in the propTypes property. When an invalid value is passed for a prop, a warning is displayed on the JavaScript console.

If default props are set for the React component, the values are first resolved before type checking against propTypes. Therefore, default values are also subject to the prop type definitions.
Note that propTypes type checking only happens in development mode, enabling you to catch bugs in your React application while developing. For performance reasons, it is not triggered in the production environment.
Using the prop-types library in React
Prior to React 15.5.0, a utility named PropTypes was available as part of the React package, which provided a lot of validators for configuring type definitions for component props. It could be accessed with React.PropTypes.
However, in later versions of React, this utility has been moved to a separate package named prop-types, so you need to add it as a dependency for your project in order to get access to the PropTypes utility.
npm install prop-types --save
It can be imported into your project files as follows:
import PropTypes from 'prop-types';
To learn more about how you can use prop-types, how it differs from using React.PropTypes, and all the available validators, see the official prop-types documentation.
React PropTypes validators
The PropTypes utility exports a wide range of validators for configuring type definitions. Below we’ll list the available validators for basic, renderable, instance, multiple, collection, and required prop types.
Basic types
Below are the validators for the basic data types.
PropTypes.any: The prop can be of any data type
PropTypes.bool: The prop should be a Boolean
PropTypes.number: The prop should be a number
PropTypes.string: The prop should be a string
PropTypes.func: The prop should be a function
PropTypes.array: The prop should be an array
PropTypes.object: The prop should be an object
PropTypes.symbol: The prop should be a symbol
Component.propTypes = {
anyProp: PropTypes.any,
booleanProp: PropTypes.bool,
numberProp: PropTypes.number,
stringProp: PropTypes.string,
functionProp: PropTypes.func
}

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

Context API :

The React Context API is a way for a React app to effectively produce global variables that can be passed around. This is the alternative to "prop drilling" or moving props from grandparent to child to parent, and so on. Context is also touted as an easier, lighter approach to state management using Redux.

React.createContext() is all you need. It returns a consumer and a provider. Provider is a component that as it's name suggests provides the state to its children. It will hold the "store" and be the parent of all the components that might need that store. Consumer as it so happens is a component that consumes and uses the state.

these steps need to be followed:

Create a folder under your app root named contexts (not required. just a convention)
Create a file named Context.js, e.g. userContext.js
import and create a context like so:
import React, { createContext } from "react";
const UserContext = createContext();
Create a component that will wrap the provider named Provider e.g. UserProvider
Example using React Hooks:
const UserProvider = ({ children }) => {
const [name, setName] = useState("John Doe");
const [age, setAge] = useState(1);
const happyBirthday = () => setAge(age + 1);
return (

{children}

);
};
Create a higher order component to consume the context named: with e.g. withUser
Example using React Hooks:
const withUser = (Child) => (props) => (

{(context) => }
{/* Another option is: {context => }*/}

);
The difference between the two options above is if you want the context to be a single nested property by this name, to explode it to its properties (which in my opinion is more convenient).
Finally export them
export { UserProvider, withUser };
And use them however you like
For example:
ReactDOM.render(

,
document.getElementById("root")
);
export default withUser(LoginForm);