35. Beginner Interview Questions

Beginner React Interview Questions

Common interview questions for entry-level React positions.

Q1: What is React?

Answer: React is a JavaScript library for building user interfaces, created by Facebook. It uses a component-based architecture where UIs are built from small, reusable pieces called components.

Key features:

• Declarative: Describe what you want, React handles how
• Component-Based: Build encapsulated, reusable components
• Virtual DOM: Efficient updates through diffing algorithm
• Unidirectional Data Flow: Data flows from parent to child

Q2: What is JSX?

Answer: JSX is a syntax extension for JavaScript that looks like HTML but compiles to JavaScript function calls.

1// JSX
2const element = <h1 className="title">Hello</h1>
3
4// Compiles to
5const element = React.createElement('h1', { className: 'title' }, 'Hello')

Key points:

• Use className instead of class
• Use htmlFor instead of for
• All tags must be closed
• Embed JavaScript with {}

Q3: What is the difference between state and props?

Answer:

1// Props - passed from parent
2function Greeting({ name }) {
3  return <h1>Hello, {name}</h1>
4}
5
6// State - internal to component
7function Counter() {
8  const [count, setCount] = useState(0)
9  return <button onClick={() => setCount(count + 1)}>{count}</button>
10}

Q4: What are React hooks?

Answer: Hooks are functions that let you use state and other React features in function components.

Common hooks:

• useState - Add state to components
• useEffect - Perform side effects
• useContext - Access context values
• useRef - Create mutable references
• useMemo - Memoize expensive calculations
• useCallback - Memoize functions

1function Example() {
2  const [count, setCount] = useState(0)
3  
4  useEffect(() => {
5    document.title = `Count: ${count}`
6  }, [count])
7  
8  return <button onClick={() => setCount(count + 1)}>{count}</button>
9}

Q5: What is the Virtual DOM?

Answer: The Virtual DOM is a lightweight JavaScript representation of the actual DOM. React uses it to optimize updates.

How it works:

1. When state changes, React creates a new Virtual DOM
2. It compares (diffs) new and old Virtual DOM
3. Calculates minimal changes needed
4. Updates only changed parts of real DOM

Benefits:

• Faster updates (batch changes)
• Better performance
• Simpler programming model

Q6: What is the useEffect hook?

Answer: useEffect lets you perform side effects in function components.

1useEffect(() => {
2  // Side effect code
3  
4  return () => {
5    // Cleanup (optional)
6  }
7}, [dependencies])

Common use cases:

• Fetching data
• Setting up subscriptions
• Manually changing DOM
• Timers and intervals

Q7: What is conditional rendering?

Answer: Showing different UI based on conditions.

1// If statement
2function Greeting({ isLoggedIn }) {
3  if (isLoggedIn) {
4    return <h1>Welcome back!</h1>
5  }
6  return <h1>Please sign in</h1>
7}
8
9// Ternary operator
10function Greeting({ isLoggedIn }) {
11  return isLoggedIn ? <UserPanel /> : <LoginForm />
12}
13
14// Logical AND
15function Notifications({ count }) {
16  return count > 0 && <Badge count={count} />
17}

Q8: What are keys in React lists?

Answer: Keys help React identify which items have changed, added, or removed in lists.

1// ✅ Good - unique, stable keys
2{users.map(user => (
3  <li key={user.id}>{user.name}</li>
4))}
5
6// ⚠️ Avoid - index as key (unless list is static)
7{items.map((item, index) => (
8  <li key={index}>{item}</li>
9))}

Keys should be:

• Unique among siblings
• Stable (don't change)
• Not random values

Q9: How do you handle events in React?

Answer: React uses camelCase event handlers that receive synthetic events.

1function Form() {
2  const handleClick = (e) => {
3    e.preventDefault()
4    console.log('Clicked!')
5  }
6  
7  const handleChange = (e) => {
8    console.log(e.target.value)
9  }
10  
11  return (
12    <form>
13      <input onChange={handleChange} />
14      <button onClick={handleClick}>Submit</button>
15    </form>
16  )
17}

Q10: What is a controlled component?

Answer: A form element whose value is controlled by React state.

1function ControlledInput() {
2  const [value, setValue] = useState('')
3  
4  return (
5    <input
6      value={value}  // Controlled by state
7      onChange={(e) => setValue(e.target.value)}
8    />
9  )
10}

Benefits:

• Single source of truth
• Easy validation
• Consistent behavior
• Can transform input

Q11: What is prop drilling and how to avoid it?

Answer: Prop drilling is passing props through many component levels to reach a deeply nested component.

Solutions:

1. Context API - Share state without props
2. State management - Redux, Zustand
3. Composition - Pass components as children

1// ❌ Prop drilling
2<App user={user}>
3  <Header user={user}>
4    <Navigation user={user}>
5      <UserMenu user={user} />
6
7// ✅ Context
8const UserContext = createContext()
9
10function App() {
11  return (
12    <UserContext.Provider value={user}>
13      <Header />
14    </UserContext.Provider>
15  )
16}
17
18function UserMenu() {
19  const user = useContext(UserContext)
20}

Q12: What are fragments?

Answer: Fragments let you group elements without adding extra DOM nodes.

1// Using Fragment
2import { Fragment } from 'react'
3
4function List() {
5  return (
6    <Fragment>
7      <li>Item 1</li>
8      <li>Item 2</li>
9    </Fragment>
10  )
11}
12
13// Short syntax
14function List() {
15  return (
16    <>
17      <li>Item 1</li>
18      <li>Item 2</li>
19    </>
20  )
21}

These questions cover React fundamentals!