Photo by Nick Fewings on Unsplash

React Interview Questions For Mid Level Frontend Engineers

Why is Transpilation Necessary for React Code?

React code is commonly written in JSX, a syntax extension that is not natively understood by browsers. JSX allows developers to write HTML-like code directly within JavaScript, improving readability and component-based development.

To execute this JSX in browsers, tools like Babel transpile it into standard JavaScript. For example:

const element = <h1>Hello, world!</h1>;

is transpiled to:

const element = React.createElement('h1', null, 'Hello, world!');

This process ensures that browsers can interpret and execute the code seamlessly.

2. What is the Role of Keys in React?

Keys are crucial identifiers for React’s reconciliation process. They uniquely associate Virtual DOM elements with their underlying data, allowing React to track changes, additions, or deletions in lists or dynamic components.

For example, without keys:

{todos.map((todo) => (
  <li>{todo.text}</li>
))}

React creates new DOM elements whenever the list updates. With keys:

{todos.map((todo) => (
  <li…