In the modern web development landscape, ReactJS has emerged as one of the most popular JavaScript libraries, used for creating dynamic and efficient user interfaces. To help candidates and new developers familiarize themselves with the most common challenges in ReactJS interviews, we’ve compiled a list of 25 basic interview questions. This article not only provides you with an overview of the types of questions you might encounter but also helps you build a solid foundation before moving on to more advanced topics.
1. What is ReactJs? How does ReactJs work?
ReactJS is an open-source library developed by Facebook, launched in 2013. It is a JavaScript library used for building user interfaces, primarily for web and mobile platforms. In the web domain, using ReactJS can enhance the user experience and offers features like Hot Reload, which speeds up development.
ReactJS operates by using a Virtual DOM and a one-way data binding model. It builds the user interface into components, utilizing JSX to describe the structure. When data or state changes, React triggers a Reconciliation process to update only the changed parts in the actual DOM, optimizing web application performance.
2. What are the advantages and disadvantages of ReactJs?
Advantages:
- Easy to create dynamic applications: React makes it easier to create web applications dynamically with less code while providing more functionality, whereas coding for JavaScript applications tends to become complicated.
- Improved performance: React uses a Virtual DOM, making web applications run faster. The Virtual DOM compares its previous state and updates only the components with changed states in the actual DOM instead of updating all components, as is typical in conventional web applications.
- Reusable components: Components are the foundation of any React application, and a single application often consists of multiple components. These components have their logic and controls and can be reused throughout the application, significantly reducing the development time of an application.
- One-way data flow: React follows a one-way data flow. This means when designing a React application, we often nest child components inside parent components. And because the data flows in one direction, debugging and identifying issues in the application becomes easier.
- Easy-to-use debugging tools: Facebook has released a Chrome extension that we can use to debug React applications. This makes the process of debugging React web applications faster and easier.
Disadvantages:
- React is not a comprehensive framework as it is just a library.
- React has a steep learning curve due to its many components, and it takes time to grasp the full benefits of all.
- New programmers may find it difficult to grasp React concepts.
- Encoding can become complex as it uses inline template and JSX.
3. What is Virtual DOM?
React maintains a lighter, in-memory representation of the “real” DOM called the Virtual DOM. When the state of an object changes, the Virtual DOM only updates that object within the actual DOM instead of updating all objects.
4. What is a Single Page Application (SPA)?
- Considered a more modern approach.
- Does not require page reloading during use.
- Follows a one-page architecture.
- Faster to use (as resources are loaded once and stored in RAM), as most resources are loaded only during the initial load and additional data is loaded when needed.
- However, the initial load may be slow if not optimized well.
- Not SEO (Search Engine Optimization) friendly.
5. What are the differences between class components and functional components?
Class Components:
- Can hold or manage state.
- More complex than stateless components.
- Can work with all lifecycle methods.
- Can be reused.
Functional Components:
- Cannot hold or manage state.
- Simple and easy to understand.
- Cannot work with any lifecycle methods.
- Cannot be reused.
6. Lifecycle stages of a component:
- Initialization
- State/Property Update
- Destruction (React component lifecycle)
7. Conditions that cause a component to rerender:
- Changes in state (setState).
- Receiving new props from the parent component.
- Calling lifecycle methods such as componentDidMount, componentDidUpdate, componentWillUnmount.
- Using forceUpdate.
- Changes in Context API, Redux, or MobX.
- Errors occurring and the component is wrapped by an Error Boundary.
- Changes in state or dependencies of useState and useEffect Hooks.
8. What is JSX? Can browsers read JSX?
JSX is a syntax extension for JavaScript. JSX is used with React to describe what the user interface looks like. By using JSX, we can write HTML structures in the same file containing JavaScript code. Browsers cannot directly read JSX. This is because they are built to read only regular JS objects, and JSX is not a regular JavaScript object. To make JSX files readable by web browsers, the file needs to be converted into a regular JavaScript object. To do this, we use Babel.
9. How do Stateless and Stateful components differ?
Stateless Components do not use state, meaning they do not track changes in data and cannot update themselves. Stateful components use state to track and store data. They can update themselves when the state changes.
10. How do Presentational and Container components differ?
Presentational components:
- Primarily responsible for displaying the user interface.
- Do not contain complex business logic or data processing.
- Receive data from props and display without performing any logic. Often referred to as “dumb components.”
Container components:
- Responsible for managing state, data, and business logic.
- Contain complex business logic and data processing.
- Manage state and can pass data down to presentational components. Often referred to as “smart components.”
11. How do Controlled and Uncontrolled components differ?
- A Controlled Component is a component that receives its current value through props and notifies changes via callbacks like onChange. A parent component “controls” it by handling callbacks and managing its own state and passing new values as props to the controlled component. It can also be referred to as a “dumb component.”
- An Uncontrolled Component is a component that maintains its own state internally, and you query the DOM using refs to find its current value when you need it. This is similar to traditional HTML behavior.
- Controlled components are components that control input elements.
12. How do you display a list component on the interface?
You can use the .map() method to create components from an array of data and then render them in JSX.
13. Why does each item in the list need a key? What are keys used for?
- Each item in a list in React needs to have a key attribute to help React identify and efficiently manage changes in the list.
- When rendering a collection in React, adding a key to each repeated component is necessary to help React trace the connection between components and data. Keys should be unique IDs, ideally a UUID or another unique string from the set of elements, or it could also be the index of the array.
14. What is a React Portal? Provide an example of using React Portal.
React Portal provides a way to render the content of a component outside its parent component hierarchy. In other words, they allow you to render an output of a component into a different DOM element that is not a child of the current component.
React Portal is useful in several scenarios:
- Modal and overlay: When you need to display a modal dialog or overlay, rendering them at the topmost level of the DOM ensures that their styles or layouts are not constrained by their parent elements.
- Third-party integrations: When integrating third-party libraries expected to render at specific DOM positions.
- Contextual menus: Creating context menus that respond to user interaction where you need to determine the relative position to the portal view or a specific DOM element.
- Tooltips and popups: When tooltips or popups need to appear above other components, regardless of their position in the component tree.
15. What are React Hooks? Name some hooks you know? What are the advantages of React Hooks?
React Hooks are integrated functions that allow developers to use state and lifecycle methods within React components. These are new features introduced in React version 16.8. Each component lifecycle has three stages including mounting, unmounting, and updating.
In addition, components have properties and states. Hooks enable developers to use these methods to improve code reuse with greater flexibility in navigating the component tree.
There are several benefits of using React Hooks:
- Elimination of the need for class-based components, lifecycles, and
thiskeyword. - Easy reuse of logic by abstracting common functionalities into custom hooks.
- Readable and testable code by sharing logic among components.
16. The difference between React class and React hook?
- Before React version 16.8 (before the introduction of hooks), class-based components were commonly used to create components, aiming to manage internal state or leverage lifecycle methods (e.g., componentDidMount or shouldComponentUpdate).
- Function components, on the other hand, are another way to create components but utilize hooks to manage the state and lifecycle of a component. Function components have several advantages over class components and are recommended.
17. What are Props?
Props is short for Properties. It’s an integral object in React, storing the values of tag attributes and operates similarly to HTML attributes. Props provide a way to pass data from one component to another. Props are passed to a component much like arguments are passed in a function.
18. Can a child component directly change the props value of its parent component?
No, because when a parent component passes props down to a child component, the child component can only read them but cannot change them.
19. What happens if a component receives a prop that it does not use?
If a component receives a prop that it does not use, there won’t be any significant issue, and the React application will continue to function normally. However, unnecessary prop passing can make the source code less clear and lead to confusion for code readers. In practical situations, it’s best to pass only the necessary props to keep the source code flexible and understandable.
20. Can props be passed back and forth between two sibling components?
In React, typically, props cannot be directly passed back and forth between two sibling components without going through a common parent component or using techniques like Context API or Redux.
21. What is State? Why should setState be called instead of directly changing state?
What is State?
- State is an integrated React object used to hold data or information about a component. State in a component can change over time, and whenever it changes, the component re-renders.
- State changes can occur in response to user actions or system-generated events. State defines the behavior of the component and how the component will render.
Why should setState be called instead of directly changing state?
setState should be called instead of directly changing state because if you try to directly change a component’s state, React won’t know when it needs to re-render the component. By using the setState() method, React can update the component UI.
22. How to change the value of state without causing component rerender?
You can use refs to change the value of a variable without triggering a component rerender.
23. When setState a value equal to the old value, does the component rerender?
When calling setState with a value equal to the current state value, React may still run the render function, but it’s not obligatory to rerender the user interface.
24. When setState, is the state value updated immediately?
When you call the setState method in React, the state value is not updated immediately. Instead, React queues up state update jobs and executes them after the current function completes.
25. How to share state between components?
- Share state between components by passing state from a parent component down to child components through props.
- For applications with complex structures, you can use the Context API.
- Use Redux to store the application’s state in a store and easily share state between components.
- Use Refs.
Continue reading part 2: 25 Advanced ReactJS Interview Questions – Elevating Your Skills
