Advanced Guide In React & React Hooks

1. Closuers:

Closures, the fundamental concept in JavaScript, are inner functions that have consent to the outer function variables and parameters.

• It permits to its own scope, variables defined between its curly brackets.
• It also allows the outer function variables.
• It consents the global variables too.

2. Hooks:

React Hooks permits you to use state and other React shapes without writing a class. Hooks are backwards-consistent. It is the special function that “hook into” React, lifecycle methods and other React features from the function components and it doesn’t work inside the classes.

3. useState():

With useState(), you can pass the initial state, here [1,2,3,4,5] with the data you want. It returns an array with 2 elements, [count, setCount] which is [the current state, set state function]. The state can be accessed with the 1st element and can also be set with the 2nd element, that is a function. Keep in mind that array destructuring syntax is often utilised with React hooks as we have done above.

Example:

4. useEffect():

The useEffect hook allows us to manage the side effects, such as API calls. It takes 2 parameters — a function and an array, and returns nothing.

Example:

5.useHistory():

The useHistory hook permits you access to the history hypothesis that you may want to use for navigation.

Example:

6. useParams():

useParams returns an object of key/value pairs of the URL parameters. You can use it to access match. Params of the current <Route>.

Example:

7.useLocation():

The useLocation hook returns the location object that allows the current URL. You can consider it like a useState which returns a new Location whenever the Url changes.

Example:

8. Render Props:

The term “render prop” is a technique for sharing code between React components using a prop whose value is function.

A component with a render prop takes a function that returns a React element and call it instead of implementing its own render logic.

Example:

9. Strict Mode:

StrictMode is a tool for highlighting potential problems within an application. Like Framgment, StrictMode doesn’t render any visible UI. Rather, it activates additional checkings and warnings for its descendants.

Example:

10. Web Components:

As the two libraries are built to solve different problems, trying to compare and contrast React with WebComponents will result inevitably in specious conclusions.

WebComponents provide strong encapsulation for reusable components. The two goals are complementary; engineers can mix-and-match the technologies. As a web developer, you are free to use React in your WebComponents, or to use WebComponents in React or both.

Example: