React Router is a standard library for routing in React. It enables the navigation among views of various components in a React Application, allows changing the browser URL, and keeps the UI in sync with the URL.

The main Components of React Router are

BrowserRouter

BrowserRouter is a router implementation that uses the HTML5 history API to keep your UI in sync with the URL

Routes

It’s a new component introduced in the v6 and a upgrade of the component. The main advantages of Routes over Switch are: Relative s and s Routes are chosen based on the best match instead of being traversed in order.

Route

Route is the conditionally shown component that renders some UI when its path matches the current URL

Link

Link component is used to create links to different routes and implement navigation around the application. It works like HTML anchor tag

What is 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.

Context API is a (kind of) new feature added in version 16.3 of React that allows one to share state across the entire app (or part of it) lightly and with ease.

React context API: How it works?

React.createContext() is all you need. It returns a consumer and a provider. Provider is a component that as it's names 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.

Context API will replace redux?

No. Well, not entirely. Redux is great for state management. Redux has its disadvantages, and that's why it's important to know what Context API gives us that Redux doesn't:

The useRef Hook is a function that returns a mutable ref object whose .current property is initialized with the passed argument (initialValue). The returned object will persist for the full lifetime of the component.

There are two main uses of useRef that are explained in the following sections:

Accessing the DOM nodes or React elements

In a functional component using useRef instead of createRef is better because. If you create a ref using createRef in a functional component, React will create a new instance of the ref on every re-render instead of keeping it between renders.

Keeping a mutable variable

Both in class components and functional components using Hooks, we have two ways of keeping data between re-renders:

In class components

In the component state: Every time the state changes, the component will be re-rendered.

In functional components

The equivalent ways in functional components using Hooks: In a state variable: useState or useReducer. Updates in state variables will cause a re-render of the component.