Question:- When do we prefer to use a class component over a function component?
Answer:- If a component needs state or lifecycle methods, we should use the class component; otherwise, use the function component. However, after React 16.8, with the addition of Hooks, you could use state, lifecycle methods, and other features that were only available in the class component right in your function component.
Question:- Is it possible for a web browser to read JSX directly?
Answer:- Web browsers cant read JSX directly. This is because the web browsers are built to read the regular JS objects only, and JSX is not a regular JavaScript object. If you want a web browser to read a JSX file, you must transform the files into a regular JavaScript object. For this purpose, Babel is used.
Question:- What do you understand by the state in React?
Answer:- In react, the state of a component is an object that holds some information that may change over the components lifetime. It would be best to try to make your state as simple as possible and minimize the number of stateful components.
Question:- What do you understand by props in React?
Answer:- In React, the props are inputs to components. They are single values or objects containing a set of values passed to components on creation using a naming convention similar to HTML-tag attributes. They are data passed down from a parent component to a child component. The main purpose of props in React is to provide the following component functionality: - Pass custom data to your component. - Trigger state changes. - Use via this.props.reactProp inside components render() method.
Question:- What do you understand by refs in React?
Answer:- Refs is the shorthand used for references in React. It is an attribute which helps to store a reference to particular DOM nodes or React elements. It provides a way to access React DOM nodes or React elements and how to interact with it. It is used when we want to change the value of a child component, without making the use of props.
Question:- How to create refs?
Answer:- Refs can be created by using React.createRef() and attached to React elements via the ref attribute. It is commonly assigned to an instance property when a component is created, and then can be referenced throughout the component.
Question:- What are Forward Refs?
Answer:- Ref forwarding is a feature which is used for passing a ref through a component to one of its child components. It can be performed by making use of the React.forwardRef() method. It is particularly useful with higher-order components and specially used in reusable component libraries.
Question:- Which is the preferred option callback refs or findDOMNode()?
Answer:- The preferred option is to use callback refs over findDOMNode() API. Because callback refs give better control when the refs are set and unset whereas findDOMNode() prevents certain improvements in React in the future.
Question:- What is the use of Refs?
Answer:- The Ref in React is used in the following cases: It is used to return a reference to the element. It is used when we need DOM measurements such as managing focus, text selection, or media playback. It is used in triggering imperative animations. It is used when integrating with third-party DOM libraries. It can also use as in callbacks.
Question:- What is React Router?
Answer:- React Router is a standard routing library system built on top of the React. It is used to create Routing in the React application using React Router Package. It helps you to define multiple routes in the app. It provides the synchronous URL on the browser with data that will be displayed on the web page. It maintains the standard structure and behavior of the application and mainly used for developing single page web applications.
Question:- Why do we need a Router in React?
Answer:- React Router plays an important role to display multiple views in a single page application. It is used to define multiple routes in the app. When a user types a specific URL into the browser, and if this URL path matches any route inside the router file, the user will be redirected to that particular Route. So, we need to add a Router library to the React app, which allows creating multiple routes with each leading to us a unique view.
Question:- List down the advantages of React Router.
Answer:- The important advantages of React Router are given below: - In this, it is not necessary to set the browser history manually. - Link uses to navigate the internal links in the application. It is similar to the anchor tag. - It uses Switch feature for rendering. - The Router needs only a Single Child element. - In this, every component is specified in . - The packages are split into three packages, which are Web, Native, and Core. It supports the compact size of the React application.
Question:- Why switch keyword used in React Router v4?
Answer:- The switch keyword is used to display only a single Route to rendered amongst the several defined Routes. The component is used to render components only when the path will be matched. Otherwise, it returns to the not found component.
Question:- How to use styles in React?
Answer:- We can use style attribute for styling in React applications, which adds dynamically-computed styles at render time. It accepts a JavaScript object in camelCased properties rather than a CSS string. The style attribute is consistent with accessing the properties on DOM nodes in JavaScript.