Top 30 ReactJS frequently Asked Questions in Interview
Q1: What are props in React?
Props are inputs to components. They are data passed down from a parent component to a child component. Props are single values or objects containing a set of values that are passed to components on creation using a naming convention similar to HTML-tag attributes. Props are used to Configure child components.
The primary purpose of props in React is to provide following component functionality:
Pass custom data to your component.
Trigger state changes.
Q2: Why State are not update directly?
If state is updated directly then it won’t re-render the component. Instead use
setState() method. It schedules an update to a component’s state object. When state changes, the component responds by re-rendering.
Q3: What is the use of refs in ReactJS?
The ref is used to return a reference to the element. Refs should be avoided in most cases, however, they can be useful when you need a direct access to the DOM element or an instance of a component.
Q4: What is Virtual DOM in ReactJS?
The Virtual DOM (VDOM) is an in-memory representation of Real DOM. The representation of a UI is kept in memory and synced with the “real” DOM. It’s a step that happens between the render function being called and the displaying of elements on the screen. This entire process is called reconciliation.
Q5: What is React Fiber?
Fiber is the new reconciliation engine or reimplementation of core algorithm in React v16. The goal of React Fiber is to increase its suitability for areas like animation, layout, gestures, ability to pause, abort, or reuse work and assign priority to different types of updates; and new concurrency primitives.
Q6: What is mean by controlled components in ReactJS?
A component that controls the input elements within the forms on subsequent user input is called Controlled Component, i.e, every state mutation will have an associated handler function.
Q7: What are uncontrolled components in ReactJS?
The Uncontrolled Components are the ones that store their own state internally, and you query the DOM using a ref to find its current value when you need it. This is a bit more like traditional HTML.
Q8: 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.
Q9: What are Higher-Order Components in ReactJS?
A higher-order component (HOC) is a function that takes a component and returns a new component. Basically, it’s a pattern that is derived from React’s compositional nature. We call them pure components because they can accept any dynamically provided child component but they won’t modify or copy any behavior from their input components.
Higher Order Components can be used for many use cases:
- Code reuse, logic and bootstrap abstraction.
- Render hijacking.
- State abstraction and manipulation.
- Props manipulation.
Q10: What is reconciliation in ReactJS?
When a component’s props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one. When they are not equal, React will update the DOM. This process is called reconciliation.
Q11: Why fragments are better than container divs in ReactJS?
Below are the list of reasons,
- Fragments are a bit faster and use less memory by not creating an extra DOM node. This only has a real benefit on very large and deep trees.
- Some CSS mechanisms like Flexbox and CSS Grid have a special parent-child relationships, and adding divs in the middle makes it hard to keep the desired layout.
- The DOM Inspector is less cluttered.
Q12: What are stateless components in ReactJS?
If the behaviour 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.
Q13: What are stateful components in ReactJS?
If the behaviour of a component is dependent on the state of the component then it can be termed as stateful component. These stateful components are always class components and have a state that gets initialized in the contstructor.
Q14: What is the impact of indexes as keys in ReactJS?
Keys should be stable, predictable, and unique so that React can keep track of elements.
If you use element data for unique key, assuming todo.id is unique to this list and stable, React would be able to reorder elements without needing to reevaluate them as much.
Q15: Why props are cannot update in React?
he React philosophy is that props should be immutable and top-down. This means that a parent can send any prop values to a child, but the child can’t modify received props.
Q16: What is React Router in ReactJS?
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.
Q17: What is React Intl?
The React Intl library makes internalization in React straightforward, with off-the-shelf components and an API that can handle everything from formatting strings, dates, and numbers, to pluralization. React Intl is part of FormatJS which provides bindings to React via its components and API.
Q18: What is Shallow Renderer in React testing?
Shallow rendering is useful for writing unit test cases in React. It lets you render a component one level deep and assert facts about what its render method returns, without worrying about the behavior of child components, which are not instantiated or rendered.
Q19: What are the core principles of Redux?
Redux follows three fundamental principles:
- Single source of truth: The state of your whole application is stored in an object tree within a single store. The single state tree makes it easier to keep track of changes over time and debug or inspect the application.
- State is read-only: The only way to change the state is to emit an action, an object describing what happened. This ensures that neither the views nor the network callbacks will ever write directly to the state.
- Changes are made with pure functions: To specify how the state tree is transformed by actions, you write reducers. Reducers are just pure functions that take the previous state and an action as parameters, and return the next state.
Q20: What is StrictMode in React?
React’s StrictMode is sort of a helper component that will help you write better react components, you can wrap a set of components with and it’ll basically:
- Verify that the components inside are following some of the recommended practices and warn you if not in the console.
- Verify the deprecated methods are not being used, and if they’re used strict mode will warn you in the console.
- Help you prevent some side effects by identifying potential risks.
Q21: What is JSX?
Q22: What is render() in React?
We should start by explaining that each React component must have a render() because it returns a single React element which is the representation of the native DOM component. If more than one HTML element needs to be rendered, then they must be grouped together inside one enclosing tag such as