react interview questions

Question 1

What is React?

Answer 1

It is an open-source front-end JavaScript library most popular for single-page web applications. It is helpful when interactive and complex UIs are built for websites or mobile apps. React.js was released for use in 2015 and since then it has become one of the most trusted and used technologies of recent time. It has built one of the largest developer communities around itself.

Question 2

List some of React.js’ features.

Answer 2

The major features of React are:

1. Uses JSX syntax, a syntax extension of JS that allows developers to write HTML in their JS code.
2. It uses Virtual DOM instead of Real DOM considering that Real DOM manipulations are expensive.
3. Supports server-side rendering which is useful for Search Engine Optimizations(SEO).
4. Follows Unidirectional or one-way data flow or data binding.
   Uses reusable/composable UI components to develop the view.

Question 3

how React’s virtual DOM prevents wasteful DOM manipulation

Answer 3

The Problem
DOM manipulation is the heart of the modern, interactive web. Unfortunately, it is also a lot slower than most JavaScript operations.

This slowness is made worse by the fact that most JavaScript frameworks update the DOM much more than they have to.

As an example, let’s say that you have a list that contains ten items. You check off the first item. Most JavaScript frameworks would rebuild the entire list. That’s ten times more work than necessary! Only one item changed, but the remaining nine get rebuilt exactly how they were before.

Rebuilding a list is no big deal to a web browser, but modern websites can use huge amounts of DOM manipulation. Inefficient updating has become a serious problem.

To address this problem, the people at React popularized something called the virtual DOM.

The Virtual DOM
Here is a refresher of what happens behind the scenes in The Virtual DOM.

In React, for every DOM object, there is a corresponding “virtual DOM object.” A virtual DOM object is a representation of a DOM object, like a lightweight copy.

A virtual DOM object has the same properties as a real DOM object, but it lacks the real thing’s power to directly change what’s on the screen.

Manipulating the DOM is slow. Manipulating the virtual DOM is much faster because nothing gets drawn onscreen. Think of manipulating the virtual DOM as editing a blueprint, as opposed to moving rooms in an actual house.

How It Helps
When you render a JSX element, every single virtual DOM object gets updated.

This sounds incredibly inefficient, but the cost is insignificant because the virtual DOM can update so quickly.

Once the virtual DOM has been updated, then React compares the virtual DOM with a virtual DOM snapshot that was taken right before the update.

By comparing the new virtual DOM with a pre-update version, React figures out exactly which virtual DOM objects have changed. This process is called “diffing.”

Once React knows which virtual DOM objects have changed, then React updates those objects, and only those objects, on the real DOM. In our example from earlier, React would be smart enough to rebuild your one checked-off list-item and leave the rest of your list alone.

This makes a big difference! React can update only the necessary parts of the DOM. React’s reputation for performance comes largely from this innovation.

In summary, here’s what happens when you try to update the DOM in React:

1. The entire virtual DOM gets updated.
2. The virtual DOM gets compared to what it looked like before you updated it. React figures out which objects have changed.
3. The changed objects, and the changed objects only, get updated on the real DOM.
4. Changes on the real DOM cause the screen to change.

source

Question 4

what is virtual DOM in react?

Answer 4

In React, for every DOM object, there is a corresponding “virtual DOM object.” A virtual DOM object is a representation of a DOM object, like a lightweight copy.

A virtual DOM object has the same properties as a real DOM object, but it lacks the real thing’s power to directly change what’s on the screen.

Manipulating the DOM is slow. Manipulating the virtual DOM is much faster because nothing gets drawn onscreen. Think of manipulating the virtual DOM as editing a blueprint, as opposed to moving rooms in an actual house.
source

Question 5

What Is Server Side Rendering?

Answer 5

Server Side Rendering (SSR) is used to render web pages on the server before sending them to the client. This allows for faster page loads, improved performance, and an SEO-friendly rendering solution for React applications. In addition, SSR can provide a better experience for users with slower internet connections or devices with limited memory and processing power by performing the initial rendering of components on the server.

SSR in React can improve page load times by eliminating unnecessary roundtrips between client and server. Server Side Rendering in React provides more control over how content appears within search engine results pages (SERPs). Since search engine crawlers rely heavily on JavaScript while indexing websites, websites built entirely with Client-Side Rendering may not appear correctly within SERPs due to their inability to parse JavaScript code.

Server Side Rendering, compared to Client-Side Rendering is that it helps ensure consistency across different browsers; since much of modern web development relies heavily upon browser specific features like APIs or custom event handlers – these types of features may not always behave properly when rendered through Client-Side techniques alone but will function normally if prerendered via Server Side methods beforehand.
source

Question 6

What is unidirectional data flow in React?

Answer 6

Unidirectional data flow describes a one-way data flow where the data can move in only one pathway when being transferred between different parts of the program.

React, a Javascript library, uses unidirectional data flow. The data from the parent is known as props. You can only transfer data from parent to child and not vice versa.

This means that the child components cannot update or modify the data on their own, making sure that a clean data flow architecture is followed. This also means that you can control the data flow better.
source

Question 7

Advantages of unidirectional data flow in react?

Answer 7

Effect of state changes
In React, each state is owned by one component. Due to the unidirectional flow, the changes made on the state of the component will only affect the children and not the parents or siblings.

Advantages of unidirectional data flow
There are many advantages of unidirectional data flow, some of which are listed below:

Debugging
One-way data flow makes debugging much easier. When the developer knows where the data is coming from and where it is going, they can dry run (or use tools) to find the problems more efficiently.

Better control
Having data flow in one direction makes the program less prone to errors and gives the developer more control.

Efficiency
As the used libraries are wary of the limitations and specifications of the unidirectional flow, extra resources are not wasted, leading to an efficient process.
source

Question 8

What are the main advantages of React.js?

Answer 8

The main advantages of React.js are:

1. It enhances the performance of the application
2. It can be used from the client-side as well as the server-side
3. The readability of code is higher in React.js because of JSX
4. It offers easy integration with frameworks such as Angular, Meteor, etc.
5. It is easy to write UI test cases with React.js
   If you can include some practical experience demonstrating the advantages of React.js in this React.js interview question, you are likely to impress the recruiter.

Question 9

what is JSX in react?

Answer 9

JSX stands for JavaScript XML and it is an XML-like syntax extension to ECMAScript. Basically it just provides the syntactic sugar for the React.createElement(type, props, …children) function, giving us expressiveness of JavaScript along with HTML like template syntax.

In the example below, the text inside <h1> tag is returned as JavaScript function to the render function.

export default function App() {
  return (
      <h1 className="greeting">{"Hello, this is a JSX Code!"}</h1>
  );
}

If you don’t use JSX syntax then the respective JavaScript code should be written as below,

import { createElement } from 'react';

export default function App() {
  return createElement(
    'h1',
    { className: 'greeting' },
    'Hello, this is a JSX Code!'
  );
}

Question 10

Describe an event in React.js?

Answer 10

When a user presses a key, clicks the mouse, or performs any action on the machine or when the machine itself triggers an action, these actions are registered as events in React.js.

In React.js, we use camelCase to name events, instead of the lowercase in HTML
In React.js, because of JSX, a function is passed as an event handler, instead of the string in HTML
For example, in traditional HTML, you might have something like this:
html

<button onclick="handleClick()">Click me</button>

In React.js with JSX, you would write something like this:

<button onClick={handleClick}>Click me</button>

Here, handleClick is a reference to a function defined elsewhere in your code that you want to be executed when the button is clicked. This approach is more inline with JavaScript conventions and allows for more flexibility and maintainability in React applications.

Question 11

How do Lists work in React.js?

Answer 11

Lists in React.js are created similar to how they are created in regular Javascript. With lists, data can be displayed in an orderly manner and is useful in displaying menus on websites. For traversing lists, the map() function is used. For example,

An array of numbers is taken by the map() function and their value is multiplied by 5
var numbers = [2,4,6,8,10]
const multiplyNums = numbers.map((number => {
return (number*5);
});
console.log (multiplyNums);
Output: The output in Javascript will be logged in the console. The output in the above case is [10, 20, 30, 40, 50]

Question 12

Why are keys used in React.js Lists?

Answer 12

Keys are used in React.js lists for two primary reasons:

1. Efficient Reconciliation: React uses keys to efficiently update the UI when the underlying data changes. When rendering a list of elements, React needs a way to uniquely identify each element in the list. Keys provide a way for React to identify which items have changed, been added, or been removed. This helps React perform a process called reconciliation, where it updates the DOM only for the elements that have changed, rather than re-rendering the entire list.
2. Optimizing Rendering Performance: Keys help optimize rendering performance by allowing React to determine which components can be re-used, moved, or removed efficiently. When a list is re-rendered, React compares the keys of the new elements with the keys of the old elements to identify the minimal set of changes needed to update the UI. Without keys, React would have to resort to less efficient methods to track changes in the list.

In summary, keys are essential in React.js lists to enable efficient updates and optimize rendering performance by uniquely identifying list elements and aiding the reconciliation process.

Question 13

Is HTML used in React?

Answer 13

No, it uses an HTML-in JavaScript syntax called JSX (JavaScript and XML) that converts HTML tags to React elements.

Question 14

Can you tell two downsides of React?

Answer 14

Steep Learning Curve for Beginners: React introduces a paradigm shift for many developers, especially those coming from a primarily imperative or jQuery background. JSX, component-based architecture, and concepts like state management and props can be challenging to grasp initially. This steep learning curve can slow down the onboarding process for new developers and require significant investment in learning.

Boilerplate Code: While React itself is relatively lightweight, building complex applications often requires integrating with other libraries and tools for state management (such as Redux), routing, form handling, and more. This can lead to a significant amount of boilerplate code, especially for larger applications. Managing this boilerplate code and keeping it organized can add complexity to the project and increase development time and maintenance overhead.

It’s important to note that while these downsides exist, they can often be mitigated with experience, good architectural decisions, and the use of additional tools and libraries within the React ecosystem.

Question 15

Can you outline the differences between Real DOM and Virtual DOM?

Answer 15

Question 16

What is Flux?

Answer 16

Flux is a word made up to describe one-way (unidirectional) data flow with very specific events and listeners. There’s no official Flux library, but it’s a pattern we can use react and many works.

there are a lot of components used in Flux. Let’s go through all the components one by one.

View: this component renders the UI. Whenever any user interaction occurs on it (like an event) then it fires off the action. Also when the Store informs the View that some change has occurred, it re-renders itself. For example, if a user clicks the Add button.

Action: this handles all the events. These events are passed by the view component. This layer is generally used to make API calls. Once the action is done it is dispatched using the Dispatcher. The action can be something like add a post, delete a post, or any other user interaction.

The common structure of the payload for dispatching an event is as follows:

{
actionType: “”,
data: {
title: “Understanding Flux step by step”,
author: “Sharvin”
}
}
The actionType key is compulsory and it is used by the dispatcher to pass updates to the related store. It is also a known practice to use constants to hold the value name for actionType key so no typos occur. Data holds the event information that we want to dispatch from Action to Store. The name for this key can be anything.

Dispatcher: this is the central hub and singleton registry. It dispatches the payload from Actions to Store. Also makes sure that there are no cascading effects when an action is dispatched to the store. It ensures that no other action happens before the data layer has completed processing and storing operations.

Consider this component has a traffic controller in the system. It is a centralized list of callbacks. It invokes the callback and broadcasts the payload it received from the action.

Due to this component, the data flow is predictable. Every action updates the specific store with the callback that is registered with the dispatcher.

Store: this holds the app state and is a data layer of this pattern. Do not consider it as a model from MVC. An application can have one or many app stores. Stores get updated because they have a callback that is registered using the dispatcher.

Node’s event emitter is used to update the store and broadcast the update to view. The view never directly updates the application state. It is updated because of the changes to the store.

This is only part of Flux that can update the data. Interfaces implemented in the store are as follows:

1. The EventEmitter is extended to inform the view that store data has been updated.
2. Listeners like addChangeListener and removeChangeListener are added.
3. emitChange is used to emit the change.

Question 17

what is observer pattern?

Answer 17

Observer is a behavioral design pattern that lets you define a subscription mechanism to notify multiple objects about any events that happen to the object they’re observing.
source

Question 18

what is redux?

Answer 18

Redux is a pattern and library for managing and updating application state, using events called “actions”. It serves as a centralized store for state that needs to be used across your entire application, with rules ensuring that the state can only be updated in a predictable fashion.
source

Question 19

Why Should I Use Redux?

Answer 19

Redux helps you manage “global” state - state that is needed across many parts of your application.

The patterns and tools provided by Redux make it easier to understand when, where, why, and how the state in your application is being updated, and how your application logic will behave when those changes occur. Redux guides you towards writing code that is predictable and testable, which helps give you confidence that your application will work as expected.
source

Question 20

When Should I Use Redux?

Answer 20

Redux helps you deal with shared state management, but like any tool, it has tradeoffs. There are more concepts to learn, and more code to write. It also adds some indirection to your code, and asks you to follow certain restrictions. It’s a trade-off between short term and long term productivity.

Redux is more useful when:

1. You have large amounts of application state that are needed in many places in the app
2. The app state is updated frequently over time
3. The logic to update that state may be complex
4. The app has a medium or large-sized codebase, and might be worked on by many people

Question 21

how to update an object or an array immutabily in js?

Answer 21

In order to update values immutably, your code must make copies of existing objects/arrays, and then modify the copies.

Question 22

Is this true or false:
Redux expects that all state updates are done immutably?

Answer 22

true

Question 23

what is an action in redux?

Answer 23

An action is a plain JavaScript object that has a type field. You can think of an action as an event that describes something that happened in the application.

The type field should be a string that gives this action a descriptive name, like “todos/todoAdded”. We usually write that type string like “domain/eventName”, where the first part is the feature or category that this action belongs to, and the second part is the specific thing that happened.

An action object can have other fields with additional information about what happened. By convention, we put that information in a field called payload.

A typical action object might look like this:

const addTodoAction = {
type: ‘todos/todoAdded’,
payload: ‘Buy milk’
}
source

Question 24

what are action creators in redux?

Answer 24

An action creator is a function that creates and returns an action object. We typically use these so we don’t have to write the action object by hand every time:

const addTodo = text => {
return {
type: ‘todos/todoAdded’,
payload: text
}
}

Question 25

what is a reducer in redux?

Answer 25

A reducer is a function that receives the current state and an action object, decides how to update the state if necessary, and returns the new state: (state, action) => newState. You can think of a reducer as an event listener which handles events based on the received action (event) type. [source](https://redux.js.org/tutorials/essentials/part-1-overview-concepts#reducers)

Question 26

what are the rules that a reducer must always follow?

Answer 26

Reducers must always follow some specific rules: 1. They should only calculate the new state value based on the state and action arguments 2. They are not allowed to modify the existing state. Instead, they must make immutable updates, by copying the existing state and making changes to the copied values. 3. They must not do any asynchronous logic, calculate random values, or cause other "side effects" The logic inside reducer functions typically follows the same series of steps: 1. Check to see if the reducer cares about this action 2. If so, make a copy of the state, update the copy with new values, and return it 3. Otherwise, return the existing state unchanged Here's a small example of a reducer, showing the steps that each reducer should follow: ``` const initialState = { value: 0 } function counterReducer(state = initialState, action) { // Check to see if the reducer cares about this action if (action.type === 'counter/increment') { // If so, make a copy of `state` return { ...state, // and update the copy with the new value value: state.value + 1 } } // otherwise return the existing state unchanged return state } ```

Question 27

why reducers are called reducers in redux?

Answer 27

The Array.reduce() method lets you take an array of values, process each item in the array one at a time, and return a single final result. You can think of it as "reducing the array down to one value". Array.reduce() takes a callback function as an argument, which will be called one time for each item in the array. It takes two arguments: previousResult, the value that your callback returned last time currentItem, the current item in the array The first time that the callback runs, there isn't a previousResult available, so we need to also pass in an initial value that will be used as the first previousResult. If we wanted to add together an array of numbers to find out what the total is, we could write a reduce callback that looks like this: ``` const numbers = [2, 5, 8] const addNumbers = (previousResult, currentItem) => { console.log({ previousResult, currentItem }) return previousResult + currentItem } const initialValue = 0 const total = numbers.reduce(addNumbers, initialValue) // {previousResult: 0, currentItem: 2} // {previousResult: 2, currentItem: 5} // {previousResult: 7, currentItem: 8} console.log(total) // 15 ``` Notice that this addNumbers "reduce callback" function doesn't need to keep track of anything itself. It takes the previousResult and currentItem arguments, does something with them, and returns a new result value. A Redux reducer function is exactly the same idea as this "reduce callback" function! It takes a "previous result" (the state), and the "current item" (the action object), decides a new state value based on those arguments, and returns that new state. If we were to create an array of Redux actions, call reduce(), and pass in a reducer function, we'd get a final result the same way: ``` const actions = [ { type: 'counter/increment' }, { type: 'counter/increment' }, { type: 'counter/increment' } ] const initialState = { value: 0 } const finalResult = actions.reduce(counterReducer, initialState) console.log(finalResult) // {value: 3} ``` We can say that Redux reducers reduce a set of actions (over time) into a single state. The difference is that with Array.reduce() it happens all at once, and with Redux, it happens over the lifetime of your running app.

Question 28

what is store in redux?

Answer 28

The current Redux application state lives in an object called the store. The store is created by passing in a reducer, and has a method called getState that returns the current state value: ``` import { configureStore } from '@reduxjs/toolkit' const store = configureStore({ reducer: counterReducer }) console.log(store.getState()) // {value: 0} ```

Question 29

what is dispatch function in redux?

Answer 29

The Redux store has a method called dispatch. The only way to update the state is to call store.dispatch() and pass in an action object. The store will run its reducer function and save the new state value inside, and we can call getState() to retrieve the updated value: ``` store.dispatch({ type: 'counter/increment' }) console.log(store.getState()) // {value: 1} ``` You can think of dispatching actions as "triggering an event" in the application. Something happened, and we want the store to know about it. Reducers act like event listeners, and when they hear an action they are interested in, they update the state in response. We typically call action creators to dispatch the right action: ``` const increment = () => { return { type: 'counter/increment' } } store.dispatch(increment()) console.log(store.getState()) // {value: 2} ```

Question 30

what are selectors in redux?

Answer 30

Selectors are functions that know how to extract specific pieces of information from a store state value. As an application grows bigger, this can help avoid repeating logic as different parts of the app need to read the same data: ``` const selectCounterValue = state => state.value const currentValue = selectCounterValue(store.getState()) console.log(currentValue) // 2 ```

Question 31

What is a high order component in React?

Answer 31

In React, a higher-order component is a function that takes a component as an argument and returns a new component that wraps the original component. HOCs allow you to add additional functionality to a component without modifying the component's code. For example, you can use a HOC to add authentication or routing capabilities to a component or to apply a specific style or behavior to multiple components. HOCs can take additional arguments, which lets you customize the behavior of the HOC. This makes them a flexible and reusable way to add functionality to your components. [source](https://www.freecodecamp.org/news/higher-order-components-in-react/#:~:text=Higher%2Dorder%20components%20(HOCs),that%20wraps%20the%20original%20component.)

Question 32

Benefits of Using Higher-Order Components in React?

Answer 32

1. Reusability: HOCs allow you to reuse component logic across multiple components, which can save time and reduce code duplication. 2. Flexibility: HOCs can take additional arguments, which allows you to customize the behavior of the HOC. This makes them a flexible way to add functionality to your components. 3. Separation of concerns: HOCs can help separate concerns in your code by encapsulating certain functionality in a separate component. This can make the code easier to read and maintain. 4. Composition: HOCs can be composed together to create more complex functionality. This allows you to build up functionality from smaller, reusable pieces. 5. Higher-order components can be used to implement cross-cutting concerns in your application such as authentication, error handling, logging, performance tracking, and many other features.

Question 33

What is the Presentational segment in react?

Answer 33

Container/Presentational Pattern In React, one way to enforce separation of concerns is by using the Container/Presentational pattern. With this pattern, we can separate the view from the application logic. Let’s say we want to create an application that fetches 6 dog images, and renders these images on the screen. Ideally, we want to enforce separation of concerns by separating this process into two parts: 1. Presentational Components: Components that care about how data is shown to the user. In this example, that’s the rendering the list of dog images. 2. Container Components: Components that care about what data is shown to the user. In this example, that’s fetching the dog images. [source](https://www.patterns.dev/react/presentational-container-pattern/)

Question 34

Explain Props in ReactJS.

Answer 34

Props in React mean properties. They act as a communication channel from parent to child.

Question 35

What does super keyword mean in React?

Answer 35

It is used to call super or parent class

Question 36

List the two types of React component.

Answer 36

Two types of React component are as follows: 1. Function component 2. Class component

Question 37

What are synthetic events in ReactJS ?

Answer 37

Synthetic events in React are cross-browser wrappers around the browser’s original event. Different browsers may have different names for the events. They create a uniform interface that React uses to ensure that events execute consistently across browsers. React normalizes this information to provide a consistent API for handling events regardless of the browser. ``` e.preventDefault() // prevents all the default behavior by the browser. e.stopPropagation() // prevents the call to the parent component whenever a child component gets called. ``` Note: Here ‘e’ is a synthetic event, a cross-browser object. It is made with a wrapper around the actual event of the browser. Some of the attributes are: 1. bubbles: Return true or false indicates event is a bubbling event or not. 2. cancelable: Return true or false indicates if the event can be canceled or not. 3. currentTarget: Indicates the element to which the handler is attached 4. defaultPrevented: Return true or false, indicates whether the event has been canceled by preventDefault(). 5. eventPhase: Returns number, indicates the phase 6. isTrusted: Return true when the event is generated by the user and false when by the browser/script 7. type: Returns string, it indicates the type of the event

Question 38

What are three main phases of react component lifecycle?

Answer 38

A component's lifecycle has three main phases: the Mounting Phase, the Updating Phase, and the Unmounting Phase. The Mounting Phase begins when a component is first created and inserted into the DOM. The Updating Phase occurs when a component's state or props change. And the Unmounting Phase occurs when a component is removed from the DOM.

Question 39

what is component mounting phase?

Answer 39

The mounting phase refers to the period when a component is being created and inserted into the DOM. During this phase, several lifecycle methods are invoked by React to enable the developer to configure the component, set up any necessary state or event listeners, and perform other initialization tasks. The mounting phase has three main lifecycle methods that are called in order: 1. constructor() 2. render() 3. getDerivedStateFromProps()

Question 40

What are stateless components?

Answer 40

If the behaviour of a component is independent of its state then it can be a stateless component. You can use either a function or a class for creating stateless components. But unless you need to use a lifecycle hook in your components, you should go for function components. There are a lot of benefits if you decide to use function components here; they are easy to write, understand, and test, a little faster, and you can avoid the this keyword altogether.

Question 41

what is jest?

Answer 41

Jest is a well-liked testing tool that makes it simple to test JavaScript applications, particularly those created using JavaScript-based frameworks like React. It is an open-source technology that has won the trust of many developers and is supported by the tech giant Facebook. Why use Jest to test React Apps? 1. Zero Configuration: Jest does not require an extensive configuration before you’re all set to start to test React applications. This is one of Jest’s most useful features, which makes it any developer’s first pick. 2. Snapshot Testing: While developers make every effort to implement changes exactly as a designer intended, snapshot testing helps ensure this occurs. The visual representation of a code is recorded and then compared with a screenshot of a new scenario to validate whether there is a difference. 3. React Integration: Jest is also mentioned in the official React documentation, emphasizing that it interacts easily with React development. It also works nicely with tools like the React Testing Library, which was created for user-centric testing of React components. 4. Community Support: Since Jest is widely utilized in the React development community, there are a ton of resources available to help with any problems one may run into when using Jest to test React applications. The developers benefit from the abundance of instructions and solutions that are available online in numerous forums.

Question 42

what is callback function?

Answer 42

A JavaScript callback is a function which is to be executed after another function has finished execution. A more formal definition would be - Any function that is passed as an argument to another function so that it can be executed in that other function is called as a callback function.

Question 43

Explain React State.

Answer 43

It is an object which stores the component’s property values. Also, it decides how the component renders and behaves.

Question 44

what are arrow functions in js?

Answer 44

Arrow function {()=>} is concise way of writing JavaScript functions in shorter way. Arrow functions were introduced in the ES6 version. They make our code more structured and readable. Arrow functions are anonymous functions i.e. functions without a name but they are often assigned to any variable

Question 45

how many ways a state can be updated in react?

Answer 45

it can be updated directly or indirectly. To implement this one can use either this. setState function or the reducer function.

Question 46

what problem does react context solves?

Answer 46

context api solves the problem of prop drilling. Prop drilling basically means that in order to pass props from parent to lowest child, we have to make it pass through all the intermediate components also. It means that on every state update, all the intermediary components will be forced to re-render, which badly affects the performance of the application. for eg- in the below given, image to show the updated user info in the profile screen, new state will be passed down right from app component to the lowest profile component.

Question 47

what is react context?

Answer 47

Context provides a way to pass data through the component tree without having to pass props down manually at every level. For example, authenticated users, locale preferences, UI themes need to be accessed in the application by many components. const { Provider, Consumer } = React.createContext(defaultValue);

Question 48

how to decide which tool to use: redux or context api in react?

Answer 48

Does React Context replace Redux? The short answer is no, it doesn’t. As we’ve seen, Context and Redux are two different tools, and comparison often arises from misconceptions about what each tool is designed for. Although Context can be orchestrated to act as a state management tool, it wasn’t designed for that purpose, so you’d have to do put in extra effort to make it work. There are already many state management tools that work well and will ease your troubles. In my experience with Redux, it can be relatively complex to achieve something that is easier to solve today with Context. Keep in mind, prop drilling and global state management is where Redux and Context’s paths cross. Redux has more functionality in this area. Ultimately, Redux and Context should be considered complementary tools that work together instead of as alternatives. My recommendation is to use Redux for complex global state management and Context for prop drilling.

Question 49

what is webpack?

Answer 49

Webpack in react is a JavaScript module bundler that is commonly used with React to bundle and manage dependencies. It takes all of the individual JavaScript files and other assets in a project, such as images and CSS, and combines them into a single bundle that can be loaded by the browser. Webpack also has the ability to transpile modern JavaScript code (such as ES6) into older versions that can be understood by older browsers.

Question 50

what is babel?

Answer 50

Babel is a JavaScript compiler Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. Here are the main things Babel can do for you: 1. Transform syntax 2. Polyfill features that are missing in your target environment (through a third-party polyfill such as core-js) 3. Source code transformations (codemods)

Question 51

How are ReactJS and React Native different?

Answer 51

Where ReactJS is a front end open-source JavaScript library for UIs, React Native is an open-source mobile framework for platforms such as Android and iOS.

Question 52

How do browsers read JSX files?

Answer 52

React, a JavaScript library for web applications utilizes JSX—a syntax extension allowing JavaScript objects within HTML elements, enhancing code clarity. JSX isn’t directly supported by browsers, requiring conversion by tools like Babel to transform JSX into valid JavaScript. This transpilation ensures browsers can interpret and execute the JSX-embedded code in React applications. [source](https://www.geeksforgeeks.org/why-cant-browsers-read-jsx/)

Question 53

Mention one difference between Props and State.

Answer 53

In React, both state and props are plain JavaScript objects and used to manage the data of a component, but they are used in different ways and have different characteristics. state is managed by the component itself and can be updated using the setState() function. Unlike props, state can be modified by the component and is used to manage the internal state of the component. Changes in the state trigger a re-render of the component and its children. props (short for "properties") are passed to a component by its parent component and are read-only, meaning that they cannot be modified by the component itself. props can be used to configure the behavior of a component and to pass data between components.

Question 54

What is the difference between Element and Component?

Answer 54

An Element is a plain object describing what you want to appear on the screen in terms of the DOM nodes or other components. Elements can contain other Elements in their props. Creating a React element is cheap. Once an element is created, it cannot be mutated. The JavaScript representation(Without JSX) of React Element would be as follows: ``` const element = React.createElement("div", { id: "login-btn" }, "Login"); ``` and this element can be simiplified using JSX ```

Login

The above React.createElement() function returns an object as below: { type: 'div', props: { children: 'Login', id: 'login-btn' } } ``` Finally, this element renders to the DOM using ReactDOM.render(). Whereas a component can be declared in several different ways. It can be a class with a render() method or it can be defined as a function. In either case, it takes props as an input, and returns a JSX tree as the output: ``` const Button = ({ handleLogin }) => (

Login

); ``` Then JSX gets transpiled to a React.createElement() function tree: ``` const Button = ({ handleLogin }) => React.createElement( "div", { id: "login-btn", onClick: handleLogin }, "Login" ); ```

Question 55

How to create components in React?

Answer 55

Components are the building blocks of creating User Interfaces(UI) in React. There are two possible ways to create a component. **Function Components**: This is the simplest way to create a component. Those are pure JavaScript functions that accept props object as the first parameter and return React elements to render the output: ``` function Greeting({ message }) { return

{`Hello, ${message}`}

; } ``` **Class Components**: You can also use ES6 class to define a component. The above function component can be written as a class component: ``` class Greeting extends React.Component { render() { return

{`Hello, ${this.props.message}`}

; } } ```

Question 56

When to use a Class Component over a Function Component?

Answer 56

After the addition of Hooks(i.e. React 16.8 onwards) it is always recommended to use Function components over Class components in React. Because you could use state, lifecycle methods and other features that were only available in class component present in function component too. But even there are two reasons to use Class components over Function components. 1. If you need a React functionality whose Function component equivalent is not present yet, like Error Boundaries. 2. In older versions, If the component needs state or lifecycle methods then you need to use class component. Note: You can also use reusable react error boundary third-party component without writing any class. i.e, No need to use class components for Error boundaries. The usage of Error boundaries from the above library is quite straight forward. Note when using react-error-boundary: ErrorBoundary is a client component. You can only pass props to it that are serializeable or use it in files that have a "use client"; directive. ``` "use client"; import { ErrorBoundary } from "react-error-boundary"; Something went wrong

}> ```