React Interview Questions
Photo by Lautaro Andreani on Unsplash Welcome to my new Interview Questions episode, In this episode, I will discuss about important react interview questions.…
Welcome to my new Interview Questions episode, In this episode, I will discuss about important react interview questions.
What is React?React is an open-source front-end JavaScript library that is used for building user interfaces, especially for single-page applications.
What are the major features of React? — React uses Virtual DOM instead of Real DOM considering that Real DOM manipulations are expensive. — Follows Unidirectional data flow or data binding. — Uses reusable UI components to develop the view.
What is JSX? JSX stands for javascript XML. By this, we can write javascript with HTML using this. Basically, it just provides syntactic sugar for the React.createElement(). JSX is an extension to JavaScript understood only by preprocessors like Babel. Once encountered by a preprocessor, this HTML-like text is converted into regular old function calls to React.createElement().
What is the difference between React Element & Component?React element is simply an object that represents a DOM node and its attributes/properties. It is immutable we can not apply any methods to it.React Component is a function or class which takes input(props) and returns react element.
What is pure component?PureComponent is exactly the same as Component except that it handles the shouldComponentUpdate() method for us. When props or state changes, PureComponent will do a shallow comparison on both props and state. Component on the other hand won’t compare current props and state to the next out of the box. Thus, the component will re-render by default whenever shouldComponentUpdate is called. We can use React.memo() for writing pure components in functional components.
What is State?A state is components own property, component can mutate state object . if state changes then the component gets re-rendered.
What is Props in React?Props are inputs to a component. It is just readable we should not mutate props. We use props to pass data from parent to children component.
What is the difference between state and props?- States are components own property. On the other hands, props are input to a component.- States are mutable and props are immutable. we should not manipulate props.
Why we should not update the state directly?If you try to update the state directly then it won’t re-render the component. But if we change state using setState then components get re-rendered
What is the purpose of the callback function as an argument of setState()?Whenever we need to update our current state to the next state based on the value passed by the property just now, then we have to use setState Callback.
<a href="https://medium.com/media/2adcff2770ade199d94955e699e99071/href">https://medium.com/media/2adcff2770ade199d94955e699e99071/href</a>In this code if we press Update State button frequently 3 times then state updated to 1 not 3 because here we are trying to update state inside setTimeout which is asynchronous. When we are pressing Update state button then handleUpdate function forms a closure with current state value(0) and after timer ends inside setState we got 0 as state value. So we get updated state value as 0 + 1 = 1. We can solve this problem by using set state callBack. Inside setState callBack we get current state value. Below we will show how we can update state value using setState callback.
<a href="https://medium.com/media/ae938f5edefdf72450a41336420b2a0e/href">https://medium.com/media/ae938f5edefdf72450a41336420b2a0e/href</a>What is DOM?DOM stands for Document Object Model. DOM is the tree representation of HTML document. Where each node represents the part of the document. Using vanilla js and DOM API we can access any html element. DOM manipulation is expensive.
What is Virtual DOM?Virtual DOM is a programming concept, which react uses to optimize the performance of applications. A virtual DOM is a lightweight JavaScript object which is a copy/blueprint of the real DOM, that is kept in memory. When a react application starts then react creates a virtual dom by copying the real dom and kept in memory. It has the same properties as the Real DOM, but it can not directly change the (DOM) content of the screen. If any data(state) changes then react automatically creates another virtual dom and update. (It’s an easy and fast process because virtual dom doesn’t need to paint the screen) After that react compares the previous virtual dom and updated virtual dom using an efficient diffing algorithm, and applies just updated changes to Real Dom. This process is also called Reconciliation.
What are the limitations of React? — Weighing in at 133kb, React is considered to be a relatively heavy dependency. By comparison, Vue is 58kb. For this reason, React could be considered overkill for small apps. — Compared to a framework like Angular, React doesn’t enforce strong opinions about how to write and structure your code or about which libraries to use for things like data fetching. In react for data-fetching we have to depend on additional data-fetching libraries like Axios or Fetch.
Can you write React without JSX?Yes, we can. actually jsx is a syntactic sugar of React.createElement(). Under the hood JSX calls the old function React.createElement().
How do you pass a value from parent to child?We can pass value parents to children by passing props to children components.
How do you pass a value from the child to the parent component?To pass a value from a child component to a parent component, the parent must supply a function for the child component by which we can change/pass value to parent from child.
What is prop drilling?When you pass a prop more than two components deep and the second component doesn’t actually need the data (it just passes it along), then it is called props drilling.
What is the component lifecycle?i) Mount ii) Update ii) Unmount
What is useEffect hook?useEffect hook is used for handling side effects(handle async operation, DOM manipulation)useEffect takes two arguments. — The first argument is a function called effect and is what gives the useEffect Hook its name. — The second argument is an optional array called dependencies which allows you to control when exactly the effect function is run. Think of dependencies as variables (typically state variables) that the effect function references and therefore depends on.The useEffect hook either return undefined or a function called cleanup function(similar to componentWillUnmount). the cleanUp function runs before the next effect runs and before the component will unmount.
When does use Effect function runs? — If we pass an empty array as dependency array ([]), the effect runs after the component is mounted (similar to componentDidMount) — If we pass an array of state variables ([var]), the effect runs after the component is mounted, and anytime the values of these variables change — If we omit the dependency array, then theeffect will run when the component is mounted and on each state change.
What is the difference between refs and state variables? — Both persist values between renders — If state changes then component re-renders, but ref don’t trigger re-render — Ref is used for accessing DOM elements (focus input, selecting text, playback control)
What is Fragment?Fragment is a newly-introduced component that supports returning multiple children from a component’s render method without needing an extraneous div element.
When should you create class-based component vs a function component?we can use both ways. but if we want more control over component then we should use class based component.
What are forward refs?By default, the ref prop only works on HTML elements, not on React components. When we want to pass down a ref to a React component, we need to tell React which HTML element it should reference.So to accept ref from child component , we need to wrap child component with forwardRef to accept ref as props.
<a href="https://medium.com/media/6b7dfbbe4d7b112d4c209c9eb651b027/href">https://medium.com/media/6b7dfbbe4d7b112d4c209c9eb651b027/href</a>What is useMemo Hook?useMemo memoizes the return value of a expensive functions so that we can avoid calling them on every render. we simply pass our function and an array of inputs to useMemo and useMemo will only recompute the memoized value when one of the inputs has changed return memoized value.
What is useCallback hook?useCallback hook returns a memoized version of a function. Basically, it prevents a function to recreate after re-render. It keeps the function reference the same. This is useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders.
What is useContext hook?This hook takes the context as input and returns context value anywhere (Any component ) in the app.
What is useReducer hook?useReducer hook is like useState, for complex state management, we should use this hook. I have read a blog regarding this hook, I think it will be helpful.
What is useLayoutEffect?useEffect and useLayoutEffect are kinds of the same. — useEffect is asynchronous and useLayoutEffect is synchronous — useEffect calls after mounting the component but useLayoutEffect calls before mounting the component. Useful link regarding underrated hooks.
What is useImperativeHandle hook? By using this hook we can access the child’s state, and function.In React, data is passed from parent to child components via props, known as unidirectional data flow. The parent component cannot directly call a function defined in the child component or reach down to grab a value for itself.In certain circumstances, we want our parent component to reach down to the child component, getting data that originates in the child component for its own use. We can achieve this type of data flow with the useImperativeHandle Hook, which allows us to expose a state or function inside a child component to the parent component through ref. We can also decide which properties or functions the parent component can access, thereby maintaining the private scoping of the child component.
What are uncontrolled and controlled components? — Controlled component is a component whose value we can pass through and we can change the value of this component, this is a react way.— Uncontrolled component which handles their own state, we can’t change/mutate their value only we can access their value by accessing DOM using ref. Useful link.
What is useId hook?The main use case of the useId hook is to generate unique ids for use within HTML elements. The best example of this would be to create an id for input and have a label point to the same id.
<a href="https://medium.com/media/651ea6f5421952b1a0a4cd39c6f2df69/href">https://medium.com/media/651ea6f5421952b1a0a4cd39c6f2df69/href</a>What are debounce and throttle?I think this link will be more informative about this topic.
Importance of keys in React list.
Optimize performance in React.js
What is portal in react?
What is Higher Order Component(HOC)?
Render Props Pattern
Composition vs inheritance in React?
What is React Profiler?