Beginner React Interview Questions

If you are preparing for a junior frontend developer role that involves React, you need a solid grasp of fundamental concepts, JSX, state management, and component lifecycles. Here are essential questions you should be ready to answer.

1. Core Concepts & JSX

Q: What is React? A: React is an open-source JavaScript library developed by Facebook for building user interfaces, primarily for single-page applications. It allows developers to create reusable UI components and efficiently update the view when data changes.

Q: What is JSX? A: JSX stands for JavaScript XML. It is a syntax extension for JavaScript that allows you to write HTML-like markup directly inside your JavaScript code. Babel transpiles JSX into standard React.createElement() calls that the browser can understand.

Q: What is the difference between an Element and a Component in React? A:

• An Element is a plain object describing what you want to appear on the screen in terms of the DOM nodes or other components (e.g., <div />).
• A Component is a function or a class that optionally accepts input (props) and returns a React element.

Q: How do you embed JavaScript expressions in JSX? A: You can embed any valid JavaScript expression inside JSX by wrapping it in curly braces {}. For example: <h1>Hello, {user.name}!</h1>.

2. Components, Props, and State

Q: What are Props in React? A: Props (short for properties) are read-only inputs passed from a parent component to a child component. They are used to configure the child component and pass data down the component tree. Props cannot be modified by the receiving component.

Q: What is State in React? A: State is an internal, mutable data store belonging to a specific component. When a component's state changes, React automatically re-renders the component to reflect the new state in the UI.

Q: What is the difference between State and Props? A:

• Props are passed to a component (like function parameters) and are immutable (read-only).
• State is managed within a component (like variables declared within a function) and is mutable.

Q: Why shouldn't you mutate state directly in React? A: If you mutate state directly (e.g., state.count = 1), React has no way of knowing that the state has changed, so it will not trigger a re-render. Always use the setter function provided by useState (or setState in class components) to ensure React knows to update the UI.

3. React Hooks Basics

Q: What is a Hook in React? A: Hooks are special functions introduced in React 16.8 that allow you to "hook into" React state and lifecycle features from functional components.

Q: Explain how useState works. A: useState is a Hook that lets you add state to functional components. It takes an initial state value as an argument and returns an array with two elements: the current state value and a function to update it.

const [count, setCount] = useState(0);

Q: Explain how useEffect works. A: useEffect is a Hook used to perform side effects in functional components, such as data fetching, subscriptions, or manually changing the DOM. It runs after the first render and after every update, depending on its dependency array.

Q: What does the dependency array in useEffect do? A: It tells React when to re-run the effect.

• No array: Runs after every render.
• Empty array []: Runs only once after the initial render (mount).
• Array with variables [var1, var2]: Runs only when var1 or var2 have changed.

4. Events and Forms

Q: How is event handling in React different from plain HTML? A:

1. React events are named using camelCase, rather than lowercase (e.g., onClick instead of onclick).
2. With JSX, you pass a function as the event handler, rather than a string.
3. You cannot return false to prevent default behavior in React; you must explicitly call event.preventDefault().

Q: What is a Controlled Component? A: A controlled component is a form element (like <input>, <textarea>, or <select>) whose value is controlled by React state. The state acts as the "single source of truth."

const [value, setValue] = useState('');
return <input value={value} onChange={(e) => setValue(e.target.value)} />;

5. Routing and Context

Q: What is React Router? A: React Router is the standard routing library for React applications. It enables navigation between different views or pages in a single-page application without refreshing the browser.

Q: What is the Context API used for? A: The Context API provides a way to pass data through the component tree without having to pass props down manually at every level (a problem known as "prop drilling"). It is useful for sharing global data like themes, user authentication status, or preferred language.