Learning ReactJS Advanced Concepts in One Go
Dec 3, 2021
86
Learning ReactJS Advanced Concepts in One Go

ReactJS has ruled in the case of Single Page Application. I am going to discuss some important advanced concepts that will take your understanding of ReactJS to the next level.

React Conditional Rendering

Distinct components are created in React and you can give behaviour to these components as you want. Thereafter they can be rendered according to the state of the application. Let us assume, a form is inside a component and below that form, an error message has to be shown. And this error message has to be rendered only when an error actually occurs so that error can be displayed.

Environment Variables (.env)

Sometimes you need 3rd party API and you are dealing with some kind of keys then env would be the best place to store this private data in a file. Now you don't need to type keys again and again in components and you just have to call from the env file. If you want to use the env file inside your React project, you need to create the env file in the root directory of the React project.

Due to some limitations, don't forget to prefix REACT_APP_ before all keys.

Once the env file is entered into your project, the development server needs to be restarted so that you can access any key inside any component.

useCallback

When the inline callback and an array of dependencies are passed, useCallback returns a memorable version of the callback that will be changed if one of the dependencies changes. This has the advantage that when callbacks are passed to customized child components and components rely on reference equality so that unnecessary renders do not occur.

There are child components inside the parent components. If the parent component is re-rendered, the child components will also be re-rendered. Now such components which have no relation with the recently updated state do not need to be re-rendered. For this useCallback has to be added on event functions that update the states.

Error Boundaries

No JavaScript error should have an effect in such a way as to break the entire application. To solve this problem, React 16 introduced a concept called "error boundary".

Error boundaries are basically React components that work to catch JavaScript errors throughout the child component tree. They will log these errors and display a fallback UI, not the component tree that has crashed. In lifecycle methods, errors are caught during rendering.

Only class components can be constructed as error boundaries and they will act like JavaScript catch {} block.

For example, when you're working with APIs and accessing data in useEffect, the API may break, you'll need a try-catch to fix it.

React with Axios

When we have to deal with API calls in React applications, Axios or fetch functions are needed.

Axios has to be installed before it can be implemented.

npm install Axios

Thereafter, you can perform all kinds of API calls.

GET, DELETE, POST, PUT, etc

The function of GET requests would look something like this.

axios.get("url")

And if you want to put the header in the Axios function then syntax will be like this.

axios.get("url", {

headers:{}

})

useMemo

The 'create' function and an array of dependencies are to be passed to useMemo, and whenever a dependency changes, useMemo will calculate the memoized value. This will have the advantage that we will avoid costly calculations on every render.

Cancel API Request

Cancelling API requests when unmounting is a sign of best practice. Let's say you need an API call to a page. Because useEffect was used in this, in case, you need to open any other link then you need to close the ongoing API request. Your user has moved to a different component and you no longer need that data.

Code Splitting

As the app grows, so does your bundle. And if there are large-third parties to it, all the more. So the code should be optimized as much as possible and it should also be kept in mind that due to the increase in size, the app takes more time to load. Hence the division of the bundle becomes inevitable.

Bundlers like Webpack, Rollup and Browserify support the code-splitting feature for this reason. All these bundlers create multiple bundles so that it all gets loaded dynamically at runtime.

Wrapping up

If you go through the above concepts carefully, I would encourage you to try all these concepts, it will be a way to master these concepts. Sometimes, learning advanced topics is a daunting task, but that's the process to follow and it turns you into an expert.