Core concepts
How you can create component without JSX?
To create a React component without JSX, you can use the React.createElement() function directly. This function takes three arguments: the type of the element (such as 'div' or a custom component), the props object (optional), and the children elements (optional).
List methods during Mounting phase keeping the order in which they occur.
Constructor, static getDerivedStateFromProps, render, componentDidMount.
Compare and contrast the usage of useMemo and useCallback hooks in React.
Usage: useMemo: Used to memoize the result of a computation within a functional component. It takes a function and an array of dependencies as arguments and returns the memoized value. useCallback: Used to memoize a callback function within a functional component. It takes a callback function and an array of dependencies as arguments and returns a memoized version of the callback.
What is Lifting State Up in React?
When several components need to share the same changing data then it is recommended to lift the shared state up to their closest common ancestor. That means if two child components share the same data from its parent, then move the state to parent instead of maintaining local state in both of the child components.
List hooks used for routing
useParams, useLocation, useHistory, useRouteMatch
Why was ReactDom moved to a separate library?
The reason React and ReactDOM were split into two libraries was due to the arrival of React Native (A react platform for mobile development). React components are such a great way to organize UI that it has now spread to mobile to react is used in web and in mobile. react-dom is used only in web apps.
How to achieve behaviour similar to componentDidMount in React functional components?
The useEffect hook with an empty dependency array simulates the componentDidMount lifecycle method. It runs the provided function after the component is first rendered.
What are the main difference between useEffect and useLayoutEffect hooks?
useEffect() is executed asynchronously, after the component has been rendered and the DOM has been updated. useLayoutEffect() is executed synchronously, before the component has been rendered and the DOM has been updated.
What is context?
Context provides a way to pass data through the component tree without having to pass props down manually at every level.
Explain the purpose of the useHistory hook in React Router.
Purpose: The useHistory hook provides access to the browser's history object, allowing you to programmatically navigate between different URLs in your application.
What is the purpose of the children prop in React?
The children prop is a special prop that allows you to pass components, elements, or text as children to other components. It enables the composition of components and the creation of more flexible and reusable component APIs.
What is getSnapshotBeforeUpdate?
getSnapshotBeforeUpdate is a lifecycle method, that is called right before React applies the changes to the DOM after a component has been updated. The purpose of this method is to capture some information from the DOM before it gets updated, and then use it after the update.
How can you use the useLayoutEffect() hook for animations in React?
The useLayoutEffect() hook can be used for animations in React by synchronously updating the DOM before the browser has a chance to paint. This can help prevent flickering and improve the smoothness of animations.
What are the three principles that Redux follows?
Single source of truth, State is read-only, Changes are made with pure functions
Explain the concept of nested routes in React Router and provide an example scenario where they might be used.
Nested routes in React Router allow for the nesting of route configurations within parent route components. This enables the creation of nested UI layouts where child components are rendered within the context of their parent routes. An example scenario where nested routes might be used is in building a dashboard interface with multiple sections, each containing its own set of sub-routes for managing different aspects of the dashboard (e.g., user profile, settings, notifications).
How can you pass and read props in React components, and what are some best practices regarding props usage?
Passing props: To pass props, add them to the JSX, similar to HTML attributes. Reading props: Use the function Avatar({ person, size }) destructuring syntax.Best practices for props usage: default values: You can specify default values for props using syntax like size = 100, which is used for missing and undefined props; JSX spread syntax: You can forward all props using JSX spread syntax <Avatar {...props} />; nested JSX: Nested JSX like <Card><Avatar /></Card> will appear as the Card component’s children prop.
Why to use useCallback and useMemo?
The useCallback hook is used to memoize functions and prevent unnecessary re-creations of functions on each render.useCallback returns a memoized version of the callback function that only changes if one of the dependencies has changed. The useMemo hook is used to memoize the result of a function computation and prevent re-computation of that result on every render.
What is the significance of the useImperativeHandle Hook?
useImperativeHandle allows us to pass values and functions from a Child component to a Parent using a ref. Note that you can only pass a ref as a prop to a child that wraps its component in forwardRef.
When to use controlled and uncotrolled components?
Use Cases: Controlled components are great when you need to validate or manipulate user input on the fly. Uncontrolled components are useful when you only need the data when the form is submitted, and not during the user's interaction
How do you handle query parameters in React Router?
In React Router, you can handle query parameters using the useLocation hook or the location prop provided by the Route component.
Explain the concept of event delegation in React. Name benefits of event delegation.
Event delegation in React involves attaching a single event listener to a parent element to manage events for its child elements. Benefits: improved Performance, dynamic Event Handling, reduced Memory Usage.
What is Suspense?
How do you create a custom hook in React?
A custom hook is a reusable function that contains some stateful logic and can be used across multiple components in a React application. Custom hooks are created by defining a function that uses one or more of the existing built-in hooks, or even other custom hooks. To create a custom hook, simply define a function starting with the "use" prefix, and use the built-in hooks inside it.
How can we combine multiple reducers in React?
In React Redux, you can combine multiple reducers into a single root reducer using the combineReducers function provided by Redux. This allows you to manage different slices of state with separate reducer functions and then combine them into a single state object.
Example:
import { combineReducers } from 'redux';
const rootReducer = combineReducers({ counter: counterReducer, todos: todoReducer });
What is the purpose of the 'Prompt' component in React Router, and how can you use it?
The 'Prompt' component in React Router is employed to prevent users from navigating away from a page with unsaved data. It triggers a confirmation dialog when a user attempts to navigate to a different route. You can use 'Prompt' by rendering it with specific props, such as 'when' to conditionally activate the prompt and 'message' to define the message displayed in the confirmation dialog.