react mid senior dev interview questuions

React Mid Senior Dev Interview Questions#

As a mid-senior React developer, you may be interviewing for roles that require a strong understanding of React and its ecosystem. Here are some common interview questions you may encounter:

1. What is React?#

React is a popular JavaScript library for building user interfaces. It uses a declarative approach to programming, allowing developers to describe how their UI should look and behave, and then updates the UI automatically when data changes.

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <p>This is my first React app.</p>
    </div>
  );
}

export default App;

2. What are the core features of React?#

• Virtual DOM: React uses a virtual DOM to optimize rendering performance by only updating the parts of the UI that have changed.
• Component-based architecture: React applications are built using reusable components that can be easily composed to create complex UIs.
• JSX: JSX is a syntax extension that allows developers to write HTML-like code in their JavaScript files, making it easier to create and read UI code.
• Unidirectional data flow: React applications follow the unidirectional data flow pattern, where data flows from parent components to child components via props.

3. What is the difference between state and props?#

State is used to manage data that changes within a component. It is mutable and can be updated using the setState method. Props, on the other hand, are used to pass data from a parent component to a child component. They are read-only and cannot be updated by the child component.

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

4. What is the purpose of React Router?#

React Router is a library that allows developers to add routing to their React applications. It enables navigation between different pages or views within a single-page application. It also provides features like dynamic routing, nested routes, and route guarding.

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
}

function Home() {
  return (
    <div>
      <h2>Home</h2>
      <p>Welcome to the home page!</p>
    </div>
  );
}

function About() {
  return (
    <div>
      <h2>About</h2>
      <p>Learn more about us.</p>
    </div>
  );
}

export default App;

5. What is Redux?#

Redux is a popular state management library for React applications. It provides a centralized store to manage the state of an application and enables predictable state updates using pure functions called reducers. Redux also supports middleware, which can be used to add additional functionality like logging or async operations.

import { createStore } from 'redux';

const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

const store = createStore(counterReducer);

store.dispatch({ type: 'INCREMENT' });
store.dispatch({ type: 'INCREMENT' });
store.dispatch({ type: 'DECREMENT' });

console.log(store.getState()); // { count: 1 }