React

Question 1

What is Redux?

Answer 1

Redux is a state management library for JavaScript applications. It helps managing application wide state in a centralized store, making it easier to track and modify state in a scalable way.

Question 2

Why use Redux?

Answer 2

• Centralized State Management - stores global state in one place, reducing prop drilling
• Predictability - State updates follow a strict flow using pure functions (reducers)
• Debugging with Redux DevTools - Allow time-travel debugging and logs every state change
• Performance Optimization - Avoids unnecessary re-renders with useSelector and memoization
• Easier Testing - Since reducers are pure functions, they can be tested independently.

Question 3

How Redux Works (Core Concepts)

Answer 3

Store - the centralized place where the state lives

Actions - Plain objects describing what should change in the state

Reducers - Pure functions that take the current state and an action, then return a new state

Dispatch - a function used to send an action to the store

Selectors - Functions that retrieve specific parts of the state

Example Code

• The component dispatches an action
• Reducer handle action
• Store updates state
• Component reads from store

Question 4

What are react hooks?

Answer 4

React hooks are functions that allow developers to use state and lifecycle methods inside components without needing class components. They were introduced to help simplify component logic and improve reusability

useState, useContext, useReducer, useRef, useMemo, useCallback

Question 5

Why were hooks introduced?

Answer 5

They were introduced to avoid class components complexity - managing state and lifecycle methods in class components can be difficult

Reusability - hooks allow logic without using Higher Order Components (HOCs ) or render props

Better Code Readability - Hooks keep related logic together, making components more modular

Question 6

What is useState and how does it work?

Answer 6

• useState is a Hook that allows functional components to have local state.
• It returns an array with two values
  
  • Current state value
  • Function to update state

Question 7

What is useEffect and how does it work?

Answer 7

• useEffect is used to handle side effects like API calls, DOM updates, and subscriptions
• It replaces lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount
• Why use it?Functional components don’t have lifecycle methods, so useEffect is the way to execute code at specific times, such as:
  • Fetching data from an API.
  • Subscribing to event listeners.
  • Updating the document title.
  • Cleaning up resources when a component unmounts.
• Basic syntax
  
  • The first argument is a function that runs after the component renders.
  • The second argument (dependencies) determines when the effect runs.

Question 8

What is useContext and how does it work?

Answer 8

• useContext allows sharing of state globally without prop drilling
• It is an alternative to Redux for small global state management

Question 9

What is useReducer and how does it work?

Answer 9

• useReducer is used for complex state logic that involves multiple updates.
• It works similarly to Redux reducers

Question 10

What is useRef and how does it work?

Answer 10

• useRef creates a mutable reference that persists across renders without causing re-renders
• useRef is a hook that lets you store a value in a box that stays the same between renders without causing the component to update when you change it.
• It’s commonly used for accessing DOM elements and stories values that don’t trigger re-renders
• When to use it?
  
  • When you need to store values across renders without causing re-renders.
  • Great for keeping track of previous values like in animations or counters.

Question 11

What is useMemo and how does it work?

Answer 11

• useMemo memoizes (caches) the result of a computation and only recalculates it when dependencies change
• it helps optimize performance when dealing with expensive calculations
• When to use it?
  
  • When you have expensive calculations (e.g., filtering, sorting, complex math).
  • When preventing unnecessary re-computation on every render.

Question 12

What is useCallbackand how does it work?

Answer 12

useCallback memoizes a function so that it doesn’t get re-created on every render
It’s useful when passing functions to child components to prevent unnecessary re-renders

Question 13

var vs let vs const

Answer 13

• var can be accessed outside of block code
  This is a block of code { }
• var declared inside of a function can’t be accessed outside of the function
• let won’t let you access variables outside of a scope
• reference declared with const cannot be changed