Mastering the Technical Interview: Must Know React Questions

You’re starting your job search — congratulations! As the elation of finishing your program wears off, your mind inevitably turns towards the technical interview. The mere thought of this can feel like you’re looking up at a mountain. However, I’m here to help! I have identified 15 key questions that will help you ace the verbal portion of the interview.

Source: https://tsh.io/wp-content/uploads/2019/12/react-meme1_.png

1. What is React?

• React is a front end framework that’s compatible with the JavaScript library for building web and mobile applications.
• It was developed by Facebook in 2011.
• It allows developers to build reusable UI components and has support of a significant portion of the open source community.

2. What are Components?

• Components are the fundamental building blocks of React that break a UI down into reusable parts.
• React renders each UI component as needed (or independently from each other) which results in fast performance speeds.

3. What is the Difference Between Props and State?

• State describes a default data value in a React component that can change over time (usually based on user actions that call for changes in the UI). State is managed internally by the component.
• Props (short for properties) describe the way in which a React component is configured. Props are passed down from a parent and do not change.

4. What are Component Lifecycle Methods?

• React component lifecycle methods are functions that a component can execute during specific lifestyle phases.
• The component’s lifecycle includes its birth (the component being created and mounted on the DOM), its growth (the component being updated over time), and its death (the component is unmounted from the DOM).
• For example, when building full stack web applications, I can leverage the componentDidMount lifecycle method to fetch data from external APIs.

Source: https://miro.medium.com/max/4560/1*EnuAy1kb9nOcFuIzM49Srw.png

5. What is the Difference Between Class and Functional Components?

• Functional Components are the most basic kind of React component, defined by the component’s props.
• In contrast, Class Components are more complicated React components that allow developers to execute component lifecycle methods and manage a component’s state.

6. What are React Events?

• Events are reactions that are triggered by specific user actions (e.g., clicking on a button in the UI).

7. What is JSX?

• JSX stands for JavaScript XML and is an HTML-like syntax that lets developers write HTML style code in JavaScript.
• Although we don’t need to use JSX to build applications with React, it is a helpful tool for reducing overall code complexity as it increases readability.
• Facebook, React’s founder, also encourages using JSX in their documentation.

8. What is the Virtual DOM?

• When the browser renders HTML documents, they create a representational tree of how the site or application is arranged. This representation tree is called the DOM.
• Without React, the website or application will use HTML to update its DOM in order to make things “change” on screen without the user needing to manually refresh a page.
• However, React takes a slightly different approach by creating the Virtual DOM which is a copy of the actual DOM.
• React uses this copy to determine what parts of the actual DOM need to updated based on the user’s action (which causes discrepancies between the actual and virtual DOM).
• React then takes the changes from the Virtual DOM and selectively updates the actual DOM (versus reloading the entire page). Over time and as an application scales, this leads to significant performance improvements.

Source: https://miro.medium.com/max/800/1*CqdIWZy0NMPQhYx2rKzo9g.png

9. What are Some Debugging Tools in React?

• You can use the wildly available React Developer Tools; accessed in browser by pressing and holding option, command, J on a Mac.
• The developer tools’ console will allow you to console.log various parts of your code to verify you’re getting the correct information.
• The developer tools’ elements will allow you to look at your code in terms of HTML to ensure you’re accessing the proper elements.
• You can also install the React Components Chrome add on, that will allow you to visualize how elements are laid out on the page.
• Linters (eslint, jslint) are also very helpful as they’re software that statically analyzes your code to fix problems; built in to most text editors and run as part of the CI pipeline.

10. What is the Difference Between React JS and React Native?

• ReactJS is an open source JavaScript library used for building web applications.
• React Native is an open source framework for building iOS and Android mobile applications.
• The “native” portion of the mobile framework’s name refers to the integration of React components with native capabilities of mobile-specific platforms.

11. What are Some Advantages of React?

• React offloads a lot of work brought forth by vanilla Javascript.
• Increased application performance via the Virtual DOM.
• Improved code efficiency with JSX.
• Ability to reuse components across multiple projects.
• Flexibility and extensibility through add-on tools provided by React’s open source community.

12. What are Some Limitations of React?

• React is a JavaScript library and not a full-blown framework, meaning it might not be full service enough for some projects.
• React’s library is extremely large and can take additional time and experience (past the initial learning phase) to really understand it.
• JSX adds a new coding dimension for developers who haven’t used it before (though it does have a gentle learning curve).

13. What is Redux?

• Redux is a library that’s compatible with and complementary to React.
• It’s used for state management; diligently keeping track of data flow.

14. What are Some Advantages of Redux?

• Adds structure to React; making code easier to maintain with more predictable results.
• Includes developer tools that allow developers to track application performance from actions to state changes in real time.
• Strong community support.

15. What are Hooks?

• Hooks allow us to use functional components without having to refactor into class components to track state and use lifecycle methods. There are 2 hooks: useState and useEffect.
• useState gives functional components access to “state.” State is in quotes because it does not have a state object (there is no this.setState); however, it does give the ability to manage its own state. Example: implementing a counter.
• useEffect gives a functional component access to “lifecycle methods.” Lifecycle methods are in quotes again as they’re not true lifecycle methods; but can function similarly thanks to useEffect. With useEffect we can update a component based upon function logic (i.e., run this based upon the arguments I receive; similar to componentDidUpdate) and we can also remove logic (i.e., if my component is deleted remove this; similar to componentDidUnmount).