Basic React Concepts for Interviews

On this page, we'll break down fundamental React topics – components, props, state, and the render cycle.

Components

At its core, React is built around components. Components are the foundation of modern UI development because they make interfaces modular, reusable, and scalable.

Some key reasons why components are the way to build user interfaces:

Reusability: Components encapsulate UI logic and styling, making it easy to reuse them across different parts of an application. This reduces redundancy and improves maintainability.
Modularity: Components encouraging breaking down complex UIs into smaller, manageable parts. Each component should focus on specific functionality, making debugging and updates easier.
Maintainability: Changes to a component affect only that component and its children, reducing unintended side effects. Code is easier to read and understand, improving long-term maintainability.
Declarative UI: React and similar frameworks use a declarative approach, where the UI reflects the current application state. This makes UI development more predictable and easier to debug compared to imperative approaches.
Encapsulation: Components encapsulate their styles, logic, and structure, preventing conflicts and making the UI more modular. Components manage their own state, making it easier to reason about UI behavior. While styling is not a concern of React, React paired together with encapsulated styles (e.g., CSS Modules, Styled Components) prevent unintended overrides. This results in a component-based architecture which scale well in large applications by encouraging separation of concerns. Teams can work on different components independently without breaking the entire application.
Composition: Components can be composed together to build complex UIs from smaller building blocks.
Easier testing: The encapsulated nature of components make them easily testable in isolation using unit and integration tests. This makes it easier to verify UI behavior without relying on the entire application.

Components have revolutionized UI development by making it more scalable, maintainable, predictable, and efficient. Every modern JavaScript framework is built on the concept of components, props, and state.

Just like how programs are built from stacks of function calls, modern apps are built using components nested within components, as deeply as the app requires.

In fact, the idea of components is so great that even the mobile development ecosystem hopped onto the components bandwagon. iOS and Android have developed their own "React" – Swift UI and Jetpack Compose respectively.

Ways of writing React components

There are two ways of writing React components:

Function components (modern standard)

The modern recommended way is to write JavaScript functions that return JSX. React hooks (e.g. useState, useEffect, etc.) was introduced in React 16.8 and are used for state and side effects. Prior to the introduction of hooks, function components could only be used for components that didn't contain any state.

Function components require less boilerplate and preferred over class components.

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

Class components (legacy)

The legacy way of writing components uses ES6 classes that extend React.Component. These class components use lifecycle methods (e.g. componentDidMount(), componentDidUpdate()) instead of hooks. This was the approach taken when React was first released and still appears in older codebases.

Class components can still be used in the latest React versions.

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

Although class components can still be asked in interviews, you shouldn't be faulted for not having experience with class components since it has been over half a decade that functions components have been the de facto way of writing components. If you haven't used class components before, there's no need to learn about it and you can just tell your interviewer.

JSX

The HTML-like syntax (<h1>) within the components looks like HTML but is not actually HTML, it's JSX. JSX (JavaScript XML) is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript. It is not a requirement for React but is widely used because it makes UI code more readable and expressive.

JSX provides a more intuitive and ergonomic way to define React components by visually structuring the UI. Browsers do not actually recognize JSX syntax, so compilers like Babel or TypeScript Compiler are needed to convert the JSX syntax into something that browsers can recognize before the code the browser runs it. Under the hood, JSX is transformed into React.createElement() function calls (the exact function can be configured by the compiler).

To produce the following HTML:

<div>
  <h1>Hello world!</h1>
  <p>Goodbye earth!</p>
</div>

Without JSX, using React.createElement() function calls:

const element = React.createElement('div', null, [
  React.createElement('h1', null, 'Hello world!'),
  React.createElement('p', null, 'Goodbye earth!'),
]);

With JSX, it is easier to read and write markup:

const element = (
  <div>
    <h1>Hello world!</h1>
    <p>Goodbye earth!</p>
  </div>
);

This looks almost exactly like the HTML that it is meant to produce! Instead of writing complex React.createElement() calls, JSX allows you to write components in a simpler way.

Under the hood, React.createElement() creates a lightweight representation of the UI and displays it in the browser using DOM APIs like document.createElement(), document.appendChild(). This process will be covered in more detail in the Rendering section.

Take note of the following key points:

JSX is syntactic sugar for React.createElement() and converted before running in the browser
Components must return a single root element
JavaScript can be written inside JSX using curly braces ({})
Know the differences between JSX and HTML (className, style, self-closing tags, etc.)

Props vs State

Props and state are data used by the components when rendering.

Props

Props is short for "properties" and represents the data that a component receives from its parents. Props are analogous to a function's parameters.

Passed from parent to child
Immutable (cannot be modified by the component receiving them)
Used for configuration and data sharing

function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>;
}

Further reading on react.dev: Passing Props to a Component

State

State can be viewed as the "memory" of a component instance. Each component instance's state is isolated and cannot be directly modified from external.

Managed within the component
Triggers a re-render when updated

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>
  );
}

Further reading on react.dev: State: A Component's Memory

Rendering

Traditionally, rendering in the context of the browser is the process by which a web browser takes the raw code of a webpage – primarily HTML, CSS, and JavaScript – and converts it into the visual, interactive page you see on your screen. However in React also uses the term "rendering" to describe how React converts components into actual DOM elements to be shown on the screen.

To avoid confusion, in this guide, "rendering" will refer to React's definition and "browser rendering" will be referred to as "browser painting".

Rendering a component in React involves several steps, from writing JSX to updating the DOM. Below is a detailed breakdown of how React renders a component, including the internal processes and optimizations.

1. JSX transformation to JavaScript

React components are written using JSX (JavaScript XML), which is syntactic sugar over React.createElement. JSX is not directly understood by the browser, hence JSX has to be compiled into JavaScript using compilers like Babel or TypeScript compiler.

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

The JSX is transformed into React.createElement calls:

function Greeting({ name }) {
  return React.createElement('h1', null, `Hello, ${name}!`);
}

2. `React.createElement()` generates a virtual DOM object

Once JSX is transformed, React.createElement produces a lightweight in-memory representation of the component called the virtual DOM.

const vdom = {
  type: 'h1',
  props: { children: 'Hello, John!' },
};

3. React reconciles the virtual DOM

When a component is rendered for the first time:

React creates the initial virtual DOM
React then mounts the component into the actual DOM using DOM methods like document.createElement() and document.appendChild()

When a component's props or state changes, the component is re-rendered:

React creates a new virtual DOM tree
React compares the new virtual DOM tree with the previous virtual DOM
Only changed elements (added, removed, different HTML attributes) are updated in the real DOM. This is called reconciliation

Recap

A React component does not directly modify the DOM. Instead:

JSX is compiled into React.createElement() calls
Virtual DOM is generated as a lightweight representation
During updates, React reconciles the new virtual DOM with the previous virtual DOM
Only the minimal, necessary updates are made to the real DOM

Further reading on react.dev: Render and Commit

What you need to know for interviews

Components: Writing functional components, reading from props, and adding state
JSX: What is JSX
Rendering: How React renders components
Virtual DOM: What virtual DOM is and what it is for
Reconciliation: Be able to explain the reconciliation process

Practice questions

Quiz:

Coding: