Core concepts
What is a React component, and in what two ways can you create components in React?
A React component is a reusable piece of UI that encapsulates a specific functionality or view. Components can be created in React using two main approaches: class components and functional components.
List 3 main phases of the component lifecycle in React.
Mounting,Updating, Unmounting.
What are React Hooks, and what problem do they solve?
React Hooks are functions that allow functional components to use state, lifecycle methods, and other React features without writing a class. They provide a more concise and readable way to manage component logic and state, especially for complex components.
What is state in React?
What is React Router?
React Router is a powerful routing library built on top of React that helps you add new screens and flows to your application incredibly quickly, all while keeping the URL in sync with what's being displayed on the page.
What is the purpose of React Fragment?
React Fragment is a feature in React that allows you to return multiple elements from a React component by allowing you to group a list of children without adding extra nodes to the DOM.
How to achieve behaviour similar to componentDidUpdate in React functional components?
By using the useEffect hook without a dependency array, you can simulate the behaviour of componentDidUpdate. The provided function will run on every render.
In what case to use useEffect?
The useEffect hook in React functional components is used for performing side effects in function components. Use cases: data fetching, subscriptions, DOM Manipulation, clean up.
List popupar libraries for state management in React.
Redux, MobX, React Context Api
What is the purpose of the Link component in React Router, and how does it differ from an anchor (<a>) tag?
The Link component in React Router is used to navigate between different routes in a React application. Unlike an anchor tag (<a>), the Link component does not trigger a full page refresh when clicked, resulting in a faster and smoother navigation experience in single-page applications.
How do you conditionally render JSX expressions in React, and what are the common shortcuts used for conditional rendering?
1. Using if statements: You can return a JSX expression conditionally with an if statement.
2. Saving JSX to a variable: You can conditionally save JSX to a variable and then include it inside other JSX by using curly braces.
3. Using ternary operator: {cond ? <A /> : <B />} means “if cond, render <A />, otherwise <B />”.
4. Using logical AND operator: {cond && <A />} means “if cond, render <A />, otherwise nothing”.
What are the main methods of the Updating phase, and when is it triggered?
getDerivedStateFromProps(), shouldComponentUpdate(), render(), componentDidUpdate(). It is triggered whenever there is a change in the component's state or props.
When to use useRef() instead of useState()?
useRef is used in React functional components when you need to keep a mutable value around across renders without triggering a re-render. It’s commonly used for accessing DOM elements, caching values, or storing mutable variables. You can use useRef to manage focus within your components, such as focusing on a specific input element when a condition is met without triggering re-renders.
List down the components of Redux.
Action – It’s an object that describes what happened.
Reducer – It is a place to determine how the state will change.
Store – State/ Object tree of the entire application is saved in the Store.
View – Simply displays the data provided by the Store.
What is the 'location' object in React Router, and how can it be useful for route-related tasks?
The 'location' object in React Router represents the current URL location and contains information about the pathname, search, and hash portions of the URL. This object is valuable for route-related tasks like dynamically rendering content based on the URL, extracting query parameters for further processing, or performing navigation-related logic based on the current URL.
What is higher-order component in React?
Higher-order components or HOC is the advanced method of reusing the component functionality logic. It simply takes the original component and returns the enhanced component. HOC are beneficial as they are easy to code and read. Also, helps to get rid of copying the same logic in every component.
Why should we avoid inline function definitions in React?
Inline function definitions in the render method can lead to unnecessary re-renders of components. It's better to define functions outside the render method or use arrow functions for event handlers to improve performance.
What is the useContext hook and how is it used?
The useContext hook is used to access and modify a React component's context value. Context allows components to share data without having to pass props down the component tree.
How do you update the state of a parent component from a child component?
Props Callback: Pass a function onStateChange as a prop which the child can call to update parent state.
Context API: Use Context to make state accessible and modifiable from descendant components.
Advanced techniques: global state management(Redux for example), useRef and forwardRef
How to add a No Match (404) Route in react-router v6?
What are Synthetic Events in React, and why are they used instead of native browser events?
Synthetic Events in React are cross-browser wrappers around the native browser events. Unlike native browser events, Synthetic Events behave identically across all supported browsers in React applications, ensuring consistent behavior and reducing the need for browser-specific code.
Why do we use keys in Lists?
The main reason why we use keys in lists are as follows:it is an identifier to find which items have changed, updated, or deleted from lists; find out which items need to be re-rendered.
Discuss the role of dependencies in the useMemo hook. How do you specify dependencies, and why are they important?
The dependencies in the useMemo hook play a crucial role in determining when the memoized value should be recalculated. By specifying dependencies, you tell React to recompute the memoized value only when one of those dependencies changes. This helps optimize performance by avoiding unnecessary recalculations and ensuring that the memoized value remains up-to-date.
How can you share state between sibling components in React?
To share state between sibling components, you can lift the state to a common parent component. This parent component can pass the state down to its child components as props, enabling the siblings to communicate through the parent component.
What is the purpose of the 'Redirect' component in React Router, and how is it used?
The 'Redirect' component in React Router is designed for programmatic navigation to a different route based on specific conditions or logic. You can use it by setting the 'to' prop to the target route you want to redirect to when certain criteria are met, providing a seamless way to change routes within your application.