React JS Concept

What is reactjs? Tell us about advantages and disadvantages of using react js.
Or Why will you select ReactJS?
Or there are so many different javascript frameworks. Why will you use ReactJS for your application?

Ans: React is a front-end JavaScript library developed by Facebook in 2011. It follows the component based approach which helps in building reusable UI components and is used for developing complex and interactive web and mobile UI.

Some of the major advantages of React are

• Reusable components
• Virtual DOM helps to make changes to small component without interfering with the whole application
• One-way data flow (Unidirectional) that prevents the app from being unstable

Disadvantages of React are listed below:

• Lack of proper documentation due to fast-changing and update in React
• Its library is very large and takes time to understand
• For new developer Coding gets complex due to JSX

How does React Work?

Ans: Instead of manipulating the browser's DOM directly, React creates a virtual DOM in memory, where it does all the necessary manipulating, before making the changes in the browser DOM. React finds out what changes have been made, and changes only what needs to be changed.

What is React Component?

Ans: Components are like functions that return HTML elements.

*What is props? *

Ans: The way of handling component properties is called Props. Props are like function arguments, and send them into the component as attributes.

What is hook?
Ans: Hooks are reusable functions. Hooks allow function components to have access to React features such as state and lifecycle methods.

What is useState hook?

Ans: useState Hook allows to track state in a function component. So we can say that State generally refers to data or properties that need to be tracked in an application.

useState accepts an initial state and returns two values:
const [current state, function that update the state] = useState (initial state)

What is useEffect?

Ans: useEffect Hook allows to perform side effects(fetching data, directly updating the DOM, and timers etc.) in a component.

useEffect accepts two arguments. The second argument is optional.
useEffect (, )

What is useContext hook?

Ans: useContext hook is a way to manage state globally. With useState it is used to share data between deeply nested component more easily than useState alone.

Without Context, we will need to pass the state as "props" through each nested componen that may be not needed in that components.

What is JSX? How does it work?

Ans: JSX stands for JavaScript XML and It allows us to write HTML inside JavaScript and place them in the DOM without using appendChild( ) or createElement( ) method. Actually JSX provides syntactic sugar for React.createElement( ) function.

What is Virtual dom? What are the differences between virtual and real dom?
Or what is the diff algorithm? How does it work?

Ans: In simple words, virtual DOM is just a copy of the original DOM. React creates a virtual DOM in its memory

When there is an update in the virtual DOM, React compares the virtual DOM with a snapshot of the virtual DOM taken right before the update of the virtual DOM. With the help of this comparison React figures out which components in the UI need to be updated.

This process is called diffing. The algorithm that is used for the diffing process is called the diffing algorithm. Once React knows which components have been updated, then it replaces the original DOM nodes with the updated DOM node.

The difference between virtual and real DOM are listed below

Real DOM

• It updates slow.
• Can directly update HTML.
• DOM manipulation is very expensive.

Virtual DOM

• It updates faster.
• Can’t directly update HTML.
• DOM manipulation is very easy.

Differences between props and state?
Or How will you pass data from parent to child
Or Can you change props?
Or is Props readonly?

Ans: Props is the shorthand for Properties in React. The way of handling component properties is called Props. Props are like function arguments, and send them into the component as attributes.
They are read-only components that must be immutable. Props are always passed down from the parent to the child components throughout the application.

Props

• Data push in HTML is called properties or props
• Props are immutable.
• Props can be accessed by the child component.
• The stateless component can have Props.

State

• Changing something on website is called states
• State is mutable
• State cannot be accessed by child components.
• The stateless components cannot have State.

What is the purpose of useState? When and why will you use it?
Or Manage state

Ans: useState Hook allows to track state in a function component. So we can say that State generally refers to data or properties that need to be tracked in an application.

useState accepts an initial state and returns two values:
const [current state, function that update the state] = useState (initial state)

What is prop drilling?
Or What is the best way to pass data 4-5 layers down?
Or What is a context API? How does it work?

Ans: Prop drilling is the process in a React app where props are passed from Parent Component to Child Component

Context API is a way to manage state globally. With useState it is used to share data between deeply nested component more easily than useState alone.

Without Context, we will need to pass the state as "props" through each nested componen that may be not needed in that components .

Difference between useEffect and useState?

Or why do we need to inject dependency for useEffect?
Ans: useEffect allows to perform side effect of component whereas useState allows to keep track state of component.

If we want to stop reload or re-rendering component then we use dependency for useEffect.

What other hooks have you used other than useState and useEffect?

Ans: I have used useContext(), useRefs() hooks

Tell us about React Component lifecycle

Ans: There are three different phases of React component’s lifecycle:

Mounting : Mounting means putting elements into the DOM.

Updating: A component is updated whenever there is a change in the component's states or props.

Unmounting: This is the final phase of a component’s life cycle in which the component is destroyed and removed from the DOM.

What is the purpose of a custom hook? How will you create a custom hook? Give us an example.

Ans: Hooks are reusable functions. When you have component logic that needs to be used by multiple components, we can extract that logic to a custom Hook.

Custom Hooks start with "use". Example: useFetch

What is the most challenging task you have accomplished using react?

Ans: I have faced a challenge which is shown on UI of selected booking item details. However, I found a solution to overcome challenges. I used useParams hooks to get selected product ID and applied Find method for filtering selected product from all products.

What is Redux and uses?

Ans: Redux is a state management library that helps to manage state in applications.

Redux is a predictable state container for JavaScript apps. As the application grows, it becomes difficult to keep it organized and maintain data flow. Redux solves this problem by managing application’s state with a single global object called Store. Redux fundamental principles help in maintaining consistency throughout application, which makes debugging and testing easier.

What is a Higher order component? Give us an example.

Ans: Higher order component is a function that takes a component as parameter and returns a new component.

const EnhancedComponent = higherOrderComponent(WrappedComponent);
Whereas a component transforms props into UI, a higher-order component transforms a component into another component.

How would you optimize a react js application?
Or How would you prevent unnecessary component re-render in reactjs?

Ans: There are many ways through which one can optimize the performance of a React app,

Using useMemo( ) -
It is a React hook that is used for caching CPU-Expensive functions.

useMemo( ) hook can be used to cache such functions. By using ]

useMemo( ), the CPU-Expensive function gets called only when it is needed.

Using React.PureComponent -
It is a base component class that checks the state and props of a component to know whether the component should be updated.
Instead of using the simple React.Component, we can use React.PureComponent to reduce the re-renders of a component unnecessarily.

Maintaining State Colocation -
This is a process of moving the state as close to where you need it as possible.

Sometimes in React app, we have a lot of unnecessary states inside the parent component which makes the code less readable and harder to maintain. Not to forget, having many states inside a single component leads to unnecessary re-renders for the component.

It is better to shift states which are less valuable to the parent component, to a separate component.

Lazy Loading -
It is a technique used to reduce the load time of a React app. Lazy loading helps reduce the risk of web app performances to a minimum.

*What are the features of React? *

Ans: Most common features of React are listed below:
React uses the virtual DOM instead of the real DOM.

• It uses server-side rendering.
• It follows uni-directional data flow or data binding.
• It uses reusable or composable UI components for developing the view

Why can’t browsers read JSX?

Ans: Browsers can only read JavaScript objects but JSX is not a regular JavaScript object. Thus to enable a browser to read JSX, first, we need to transform JSX file into a JavaScript object using JSX transformers like Babel and then pass it to the browser.

What is React Router?

Ans: React Router is a powerful routing library built on top of React, which helps in adding new screens and flows to the application. This keeps the URL in sync with data that’s being displayed on the web page. It maintains a standardized structure and behavior and is used for developing single-page web applications. React Router has a simple API.

What is the purpose of render() in React.

Ans: Each React component must have a render() mandatorily. It returns a single React element which is the representation of the native DOM component. If more than one HTML element needs to be rendered, then they must be grouped together inside one enclosing tag such as

, , etc.

What is the significance of keys in React?

Ans: Keys are used for identifying unique Virtual DOM Elements with their corresponding data driving the UI. They help React to optimize the rendering by recycling all the existing elements in the DOM. These keys must be a unique number or string, using which React just reorders the elements instead of re-rendering them. This leads to increase in application’s performance.

What are the different ways to style a React component?

Ans: There are many different ways through which one can style a React component. Some of the ways are :

Inline Styling: We can directly style an element using inline style attributes. Make sure the value of style is a JavaScript object.

Using JavaScript object: We can create a separate JavaScript object and set the desired style properties. This object can be used as the value of the inline style attribute.

CSS Modules: We can create a separate CSS module and import this module inside our component. Create a file with “.module.css”‘ extension.

Why is it necessary to start component names with a capital letter?

Ans: In React, it is necessary to start component names with a capital letter. If we start the component name with lower case, it will throw an error as an unrecognized tag. It is because, in JSX, lower case tag names are considered as HTML tags.

What are fragments?

Ans: In React, Fragments are used for components to return multiple elements. It allows you to group a list of multiple children without adding an extra node to the DOM.

How can you create a component in React?

Ans: Function Components: This is the simplest way to create a component in React. These are the pure JavaScript functions that accept props object as the first parameter and return React elements.

function Greeting({ message }) {
return <h1>{Hello, ${message}}</h1>
}

Class Components: The class components method facilitates you to use ES6 class to define a component. The above function component can be written as:

class Greeting extends React.Component {
render() {
return <h1>{Hello, ${this.props.message}}</h1>
}
}