Nutritional Facts
What is React?
React is a popular JavaScript library for building user interfaces.
component-based, virtual DOM, reconciliation
It was developed by Facebook and is now maintained by a community of developers. React uses a component-based approach to building UIs, allowing developers to break down complex UIs into reusable, self-contained components. React also utilizes a virtual DOM to efficiently update the UI when data changes, minimizing the number of changes that need to be made to the actual DOM. When there are changes to the state of the application, React updates the virtual DOM, and then uses a process called "reconciliation" to compare the changes in the virtual DOM to the actual DOM. This makes React highly performant and scalable, and it is widely used in web and mobile app development.
What is a state in React and how is it used?
In React, "state" is a JavaScript object that is used to store and manage the internal data of a component. State represents the current state of a component and can be updated based on user events, server responses, or other triggers.
In summary, state is a JavaScript object that is used to store and manage the internal data of a component in React. It can be updated using the setState() method, and when state is updated, React will re-render the component and update the user interface to reflect the new state.
What do you understand from “In React, everything is a component.”
"In React, everything is a component" means that the entire user interface of a React application is built using reusable and composable components.
A component in React is a JavaScript function or class that accepts inputs, called props, and returns a hierarchy of UI elements, which can be other components or HTML tags. Components can be as simple as a button or a text input, or as complex as a full-page layout or a data visualization chart.
The advantage of building an application using components is that it allows for a modular and reusable codebase. By breaking down a user interface into smaller, more manageable components, developers can create and maintain an application with greater ease. Components can also be reused across different parts of the application or shared with other developers, reducing the need to rewrite similar code multiple times.
Furthermore, React encourages a declarative programming approach, where components are designed to be "stateless" and to render based on the data and props passed to them. This approach reduces the complexity of managing application state and makes it easier to reason about the code.
In summary, "In React, everything is a component" emphasizes the importance of building an application's user interface using reusable and composable components.
Why do we need a Router in React?
In a single-page application (SPA) built with React, there is typically only one HTML page, but the content of that page is dynamically updated in response to user interactions or changes in application state. As a result, it's important to have a way to manage the URLs and navigation within the application.
This is where a router comes in. A router is a piece of code that maps URLs to different components or views within a React application. It allows you to define the different "pages" or views of your application, and specify what should happen when a user navigates to a particular URL.
Improved user experience: A router allows users to navigate through different parts of the application using familiar URL patterns and browser navigation features like the back and forward buttons.
Better organization and maintainability: By defining routes for different parts of the application, you can keep your code organized and modular. This makes it easier to maintain and extend the application over time.
Improved performance: A router can help optimize the performance of your application by only rendering the components that are needed for a particular URL, rather than rendering the entire application on each page load.
React provides a number of router libraries, including React Router and Reach Router, which allow you to add routing and navigation capabilities to your application with a minimal amount of code. These libraries also provide additional features like nested routes, route parameters, and route guards, which allow you to add more complex navigation and authentication logic to your application.
What is the difference between calling a promise and using a `.then` vs using `await`?
Await stops the flow through code until a response is returned, promise continues the flow of code.
Using await can make your code easier to read and write, especially when dealing with complex asynchronous operations that involve multiple promises. However, it's important to note that await can only be used inside an async function, whereas .then can be used anywhere a promise is returned.
Both .then and await are used to handle asynchronous operations in JavaScript, but they differ in syntax and behavior.
When using a .then method to handle a promise, you attach a callback function to the promise that will be called when the promise resolves.
List some of the major advantages of React.
Virtual DOM: React uses a virtual DOM, which allows it to update only the necessary components, making it faster and more efficient.
Reusability: React components can be easily reused, reducing code duplication and making it easier to maintain.
Declarative Programming: React's declarative programming style makes it easier to understand and debug code, as it focuses on what the code should do, rather than how it should do it.
Large Ecosystem: React has a large ecosystem of tools and libraries, such as React Router and Redux, that can be used to extend its functionality.
Server-Side Rendering: React can be used for server-side rendering, which can improve website performance and search engine optimization.
Strong Community: React has a strong community of developers, which means there are many resources available, including documentation, tutorials, and support.
Unidirectional Data Flow: React uses a unidirectional data flow, where data flows in a single direction from the top-level component down to child components. This makes it easy to reason about the behavior of your application and can help prevent bugs.
"In calling setState, when would you pick one method of calling this function over the other?
In React, there are two ways to call the setState function: using an object or using a function.
use the object method when you need to update the state with a new value based on the current value of the state, and you would use the function method when you need to update the state based on the previous state
When using an object to update state, you would pass an object that contains the properties you want to update, like this:
this.setState({count: this.state.count + 1});
This is the simplest way to update state and is appropriate when you want to update the state with a new value based on the current value of the state.
When using a function to update state, you would pass a function that returns an object containing the properties you want to update, like this:
this.setState((prevState) => { return {count: prevState.count + 1}; });
This method is useful when you need to update state based on the previous state, as it guarantees that the state will be updated correctly even if multiple calls to setState are made in quick succession.
What are Props?
In React, "props" (short for "properties") is an object that is used to pass data from one component to another. Props are a way of communicating between components and can be used to customize the behavior and appearance of a component.
Props are passed down from a parent component to a child component as a set of key-value pairs. The child component can then use the props to render itself or to perform some other action. Props are read-only and cannot be modified by the child component.
In summary, props are a way of passing data from a parent component to a child component in React. They allow for customization of component behavior and appearance, and are read-only and cannot be modified by the child component.
What is React Router?
React Router is a popular library for routing and navigation in React applications. It provides a declarative way to handle navigation and URL routing in single-page applications (SPAs).
With React Router, you can define routes for different parts of your application, and specify what should happen when a user navigates to a particular URL. React Router supports several types of routes, including:
Route: The most basic type of route, which matches a URL path and renders a corresponding component.
Switch: A container for routes that renders the first matching route inside it.
Redirect: A component that redirects the user to a different URL when a certain condition is met.
NavLink: A component that renders a link to a specified URL, with support for active styles and class names.
React Router also provides features like nested routes, route parameters, and route guards, which allow you to add more complex navigation and authentication logic to your application.
How come when you declare a variable in any js or jsx file outside of any class, object, or function, it’s not really global to all other files, components?
When you declare a variable in a JavaScript or JSX file outside of any class, object, or function, it is actually scoped to the module in which it is declared. This means that the variable is only accessible within that module and is not truly global to all other files and components in your application.
This is because JavaScript modules have their own scope, and any variables, functions, or classes declared at the top level of a module are scoped to that module. If you want to share a variable between modules, you need to explicitly export it from the module that declares it and import it into the modules that need it.
What are the limitations of React?
Steep Learning Curve: React is a powerful library but requires developers to have a strong understanding of JavaScript and some of its advanced features.
Performance Issues: React can become slow if it is not optimized properly. It can be memory-intensive if not used correctly, leading to performance issues.
Incompatibility with Legacy Browsers: React does not support older versions of Internet Explorer, so it is difficult to use React in projects that require backward compatibility.
Over-Abstraction: Overuse of abstraction can make code hard to understand and maintain.
Large File Sizes: React is a large library and can add significant weight to a project, which can impact page load times.
Fragmentation: The React ecosystem is rapidly evolving, which can lead to fragmentation and incompatibility issues between different versions and libraries.
Is setState a synchronous or async call?
In React, `setState()` is generally an asynchronous call, which means that updates to the state may not happen immediately after calling the function. Instead, React may batch multiple state updates together for performance reasons, or defer the update to a later point in time. However, there are some cases when `setState()` is synchronous. For example, if you call `setState()` within a `React.useEffect()` hook, it will be synchronous. Additionally, if the state update is triggered outside of React event loop, such as within a Promise or a setTimeout callback, the update may also happen synchronously. In general, it's best to assume that `setState()` is asynchronous and write your code accordingly. If you need to perform an action after the state has been updated, you can pass a callback function as the second argument to `setState()`, which will be called after the state update has been applied.
What are the different phases of React component’s lifecycle?
In React, a component's lifecycle refers to the different stages or phases that a component goes through from initialization to removal. There are three main phases of a component's lifecycle: Mounting, Updating, and Unmounting. Each phase has its own set of lifecycle methods that can be used to perform different tasks at different times during the component's lifecycle.
In addition to these methods, there are also several other lifecycle methods that are less commonly used or deprecated in newer versions of React. By understanding the different phases of a component's lifecycle and the methods associated with each phase, developers can write more efficient and effective React components.
List down the advantages of ReactRouter.
Declarative routing: React Router provides a declarative way to define the routes of your application using a set of components, such as and . This makes it easy to understand the routing logic of your application and to modify it as needed.
Nested routes: React Router supports nested routes, which allow you to define sub-routes for different parts of your application. This can help keep your code organized and make it easier to manage complex routing logic.
Route parameters: React Router allows you to define dynamic route parameters, such as :id, which can be used to extract data from the URL and pass it to your components. This can be useful for creating dynamic pages that display different content based on the URL.
Code splitting: React Router supports code splitting, which allows you to split your application into smaller chunks that can be loaded on demand. This can help improve the performance of your application by reducing the amount of code that needs to be loaded on the initial page load.
History manipulation: React Router provides a way to manipulate the browser history, which allows you to control the behavior of the back and forward buttons. This can be useful for creating more complex navigation patterns, such as modal dialogs or wizard-style forms.
Community support: React Router is a widely used library with a large and active community. This means that there are plenty of resources available, including documentation, tutorials, and third-party plugins and integrations.
Overall, React Router provides a powerful and flexible way to add routing and navigation to your React applications, while also offering a range of advanced features that can help you create complex and dynamic user interfaces.
What are Pure Components?
In React, Pure Components are components that inherit from the base React.PureComponent class instead of the regular React.Component class. The main difference between React.PureComponent and React.Component is that React.PureComponent implements a shallow comparison of the component's props and state objects to determine if a re-render is necessary. This means that if the props and state of a Pure Component haven't changed, the component won't re-render, which can lead to performance optimizations.
The shallow comparison of props and state in a Pure Component means that any complex objects or arrays passed as props or state may not trigger a re-render, even if their values have changed. This is because the comparison only checks for changes in the object or array reference, not the actual values within the object or array. To work around this limitation, you can use immutable data structures or implement custom shouldComponentUpdate logic.
Pure Components are useful for optimizing performance in large React applications where re-renders can be costly. However, it's important to note that not all components should be implemented as Pure Components, as there are cases where you may want to re-render a component even if its props and state haven't changed. It's important to carefully consider the behavior of your components and use Pure Components judiciously.
What is JSX? / Why can’t browsers read JSX?
JSX is an XML-like syntax extension for JavaScript that allows developers to write HTML-like syntax within their JavaScript code when building React applications.
It allows for easy creation and manipulation of UI components and is used to build the structure of a React component's render method. JSX gets transpiled to JavaScript and is used to create the Virtual DOM in React, making it more efficient than traditional HTML. JSX also allows developers to embed JavaScript expressions in their markup, making it more flexible than plain HTML.
Browsers are designed to read HTML, CSS, and JavaScript, and JSX is not a standard web technology
Browsers can only read and understand JavaScript, whereas JSX is a syntax extension for JavaScript. JSX needs to be transformed into regular JavaScript, using a tool such as Babel, before it can be read and executed by browsers. This process involves transpiling the JSX code into plain JavaScript that can be understood by the browser.
What is the virtual DOM? Explain how it works within ReactJS.
The virtual DOM (VDOM) is a simplified copy of the actual DOM (the document object model) that React uses to update the browser UI. When there are changes to the state of the application, React updates the virtual DOM, and then uses a process called "reconciliation" to compare the changes in the virtual DOM to the actual DOM. React only updates the parts of the actual DOM that need to be changed, which makes it more efficient than updating the entire DOM.
The VDOM works in ReactJS by providing a lightweight representation of the actual DOM, allowing React to quickly and efficiently compare the previous state with the new state of the application. When a change occurs, React will update the virtual DOM, and then compare it with the previous virtual DOM to determine which elements have changed. Once it identifies the changes, React will then update the actual DOM accordingly.
This process is faster and more efficient than updating the actual DOM directly, since the actual DOM can be slow to update due to its complexity and the number of operations required to change it. The virtual DOM simplifies this process by allowing React to update only the parts of the actual DOM that need to be changed, which results in faster rendering times and a better user experience.
What is Higher OrderComponents(HOC)?
Higher-Order Components (HOC) is a pattern in React where a function takes a component and returns a new component with additional functionality. It is a way to reuse component logic and share code between components.
HOC is a function that takes a component and returns a new component that wraps the original component. The HOC can then provide additional props or functionality to the original component. This is useful when you want to reuse some logic across multiple components, or when you want to apply some common functionality to a group of components.
Why is Switch component used in React Router v4?
The Switch component in React Router v4 is used to wrap a collection of Route components. Its purpose is to only render the first Route that matches the current URL, and ignore any subsequent matches.
This behavior is important because in a typical React Router application, you might have multiple routes that could potentially match a given URL.
By wrapping our routes in a Switch component, we can ensure that only the first matching route is rendered. In the example above, only the third route would be rendered, because it is the first one that matches the URL.
Using the Switch component can help simplify the logic of your routing code and ensure that your application behaves predictably.
How different is React’s ES6 syntax when compared to ES5?
React's ES6 syntax differs significantly from ES5. ES6, also known as ECMAScript 2015, introduced many new features that make the code more concise and easier to read. Some of the significant changes include:
let and const keywords to declare variables, which replaced the var keyword
Arrow functions, which provide a shorter syntax for writing function expressions
Classes, which make it easier to create and manage object-oriented code
Template literals, which make it easier to concatenate strings and variables
Destructuring assignment, which allows you to extract properties from an object or array and assign them to variables. React also introduced some new syntax that works well with ES6, such as the import and export statements for managing modules.
Overall, using ES6 in React can make your code more concise, readable, and maintainable.
Differentiate between Real DOM and Virtual DOM.Real DOM vs Virtual DOM
The main difference between Real DOM and Virtual DOM is how they represent and update the user interface of a web application.
Real DOM (Document Object Model) refers to the actual HTML elements that are rendered in the browser. Whenever there is a change in the data or state of a web application, the entire Real DOM is recreated, which can be an expensive operation, especially for large and complex applications. This is because every time a change is made, the browser has to recalculate the styles, layout, and positioning of every element on the page.
Virtual DOM, on the other hand, is an abstraction of the Real DOM. It is a lightweight representation of the user interface as a JavaScript object that React uses to keep track of changes. Whenever there is a change in the data or state of a component, React updates the Virtual DOM instead of the Real DOM. React then calculates the difference between the previous and new Virtual DOM representations, and updates only the parts of the Real DOM that need to change. This process, called reconciliation, is much faster than updating the entire Real DOM.
In summary, Real DOM is the actual HTML elements that are rendered in the browser, while Virtual DOM is a lightweight representation of the Real DOM that React uses to optimize the updating of the user interface. Using Virtual DOM can make your React application more performant and efficient.
How is React Router different from conventional routing?
Client-side routing: React Router is a client-side routing library, which means that all the routing logic is handled by the client-side JavaScript code running in the user's browser. In contrast, conventional routing is typically handled by the server, which maps incoming requests to different handlers or controllers based on the requested URL.
Declarative routing: React Router provides a declarative way to define the routes of your application using a set of components, such as and . This makes it easy to understand the routing logic of your application and to modify it as needed. In contrast, conventional routing typically requires you to define the routes using explicit code, such as regular expressions or route handlers.
Dynamic routing: React Router allows you to define dynamic routes that can be updated based on the application state or user input. This can be useful for creating dynamic pages that display different content based on the URL. Conventional routing typically doesn't support dynamic routing, as the routes are typically defined statically at startup time.
History manipulation: React Router provides a way to manipulate the browser history, which allows you to control the behavior of the back and forward buttons. This can be useful for creating more complex navigation patterns, such as modal dialogs or wizard-style forms. Conventional routing typically doesn't support history manipulation, as the routing is handled entirely on the server.
Code splitting: React Router supports code splitting, which allows you to split your application into smaller chunks that can be loaded on demand. This can help improve the performance of your application by reducing the amount of code that needs to be loaded on the initial page load. Conventional routing typically doesn't support code splitting, as the routing is typically handled entirely on the server.
Overall, React Router provides a powerful and flexible way to add client-side routing and navigation to your React applications, while also offering a range of advanced features that can help you create complex and dynamic user interfaces.