If you are a web developer or a frontend developer, you probably already know about the javascript library ReactJS. It is one of the most popular and widely used frontend libraries for building single page applications (SPAs). Reactjs is open source and created by Meta (formerly Facebook).

If you are new to React and want to learn the basics of react js then you can enrol for the React JS course by KnowledgeHut. It is a comprehensive course that gives you plenty of hands-on practice and gives you the confidence to work with React comfortably.

The reason for most companies to use this library is because it provides so many out of the box features and allows developers to use other libraries/tools to integrate with this library. One such tool that every react application uses is React Router. It helps us to navigate to other parts of the application based on the user request, and it all happens without reloading the webpage.

In this article, we will understand why we need a react router. How to install a react router. What are the benefits of a react router. We will also answer some of the most frequently asked questions (FAQs) about React Router.

At the time of writing this article, the latest and most stable version is React Router v6.

React context works by exposing a 'context object'. As shown below, we declare a context object with a default value:

This context object, 'MyContext' has a 'Provider' component that allows as many other components as possible below it who need access to context object changes, subscribe to it. This means that context changes can be subscribed to on the component hierarchy by consuming components who must be children of Provider components. The signature of a Provider component is shown below:

It comes with a value prop, which is passed to the components down the tree that are descendants of the said Provider. This means that whenever the Provider props changes, these changes would also be propagated down the tree to every component subscribed to the Provider component, which would of course cause a re-render.

During render or in other lifecycle methods like componentDidMount(), componentDidUpdate() and so on, we can make use of the current value of the context. Let us see an example with the 'render()' method below:

As you can see on the first-line, we are initializing our context object here, and assigning the 'contextType' to the class that needs that context. In doing so, this allows us to consume the nearest context value using 'this.context' inside any react lifecycle hook or even during render. Note that we can only subscribe to just a single context with this approach. Not to worry, we will look at an example later in the post.

Note: In the case where there is no matching Provider up in the tree, the component makes use of the 'defaultValue' from the initial context object instantiation. This tells us that as many consumers as possible can subscribe to a single context object or Provider component, as the case may.

useRef is a hook introduced with other hooks in React version 16.8 and is mainly used for creating a reference of the DOM element or directly accessing it inside a functional component.

But don't think even for a second that it's the only thing this hook is capable of as it can even be used for storing mutable values across different rerenders of the component.

Like every other hook in React, we have to first import this hook at the very top level as per the rules of hooks and then only we can use it in our apps.

Unlike other hooks like useState which returns two values, the state and a function, this hook returns a mutable ref object which will carry the value throughout the component and if any change is made in the component, the updated value will be carried forward across our React component.

This object has a property called current which will initially contain the value with which we have initialized the component.