React and Typescript

Question 1

What is React?

Answer 1

A JavaScript library for building user interfaces using a component-based architecture.

Question 2

What is a React component?

Answer 2

A reusable piece of UI defined as a function or class.

Question 3

What are props in React?

Answer 3

Inputs passed from parent to child components to configure behavior or appearance.

Question 4

What is state in React?

Answer 4

A component-specific object that determines how a component behaves and renders.

Question 5

What is JSX?

Answer 5

A syntax extension for JavaScript that allows writing HTML-like code in React.

Question 6

What is the virtual DOM?

Answer 6

A lightweight in-memory representation of the real DOM used to optimize rendering.

Question 7

What is the useEffect hook?

Answer 7

A hook for handling side effects like data fetching or subscriptions.

Question 8

What is the useState hook?

Answer 8

A hook that adds state management to functional components.

Question 9

What is the purpose of React keys?

Answer 9

To help React identify which items changed, added, or removed in a list.

Question 10

What is React Router?

Answer 10

A library for routing in React applications, enabling dynamic navigation.

Question 11

What is the useRef hook?

Answer 11

A hook that provides a mutable reference that persists across renders.

Question 12

What is the useCallback hook?

Answer 12

Returns a memoized version of a callback function.

Question 13

What is the useMemo hook?

Answer 13

Memoizes the result of a computation to avoid unnecessary recalculations.

Question 14

What is context in React?

Answer 14

A way to share data across components without using props.

Question 15

What is the useContext hook?

Answer 15

Allows consuming context values in functional components.

Question 16

What is a custom hook?

Answer 16

A reusable function that uses built-in hooks and starts with ‘use’.

Question 17

What is a controlled component?

Answer 17

A component whose input form elements are controlled by state.

Question 18

What is an uncontrolled component?

Answer 18

A component that manages its own internal state using refs.

Question 19

What is React.memo?

Answer 19

A higher-order component that memoizes the result to prevent re-rendering.

Question 20

What is the useReducer hook?

Answer 20

A hook for managing complex state logic with reducers.

Question 21

What is TypeScript?

Answer 21

A superset of JavaScript that adds static typing.

Question 22

Why use TypeScript with React?

Answer 22

To catch errors during development, improve code clarity, and enable powerful IDE support.

Question 23

How do you type React props?

Answer 23

By defining an interface and passing it as a generic to the component.

Question 24

How do you type component state in TypeScript?

Answer 24

By using type annotations with useState or interfaces in class components.

Question 25

What is a union type?

Answer 25

A type that allows one of several possible types (e.g., 'string | number').

Question 26

What is a type alias?

Answer 26

A custom name for a type defined with the 'type' keyword.

Question 27

What is an interface?

Answer 27

A way to define object shapes in TypeScript.

Question 28

What are optional properties in TypeScript?

Answer 28

Properties with a '?' that are not required to be passed.

Question 29

What is type inference?

Answer 29

TypeScript's ability to automatically determine a variable's type.

Question 30

What are generics in TypeScript?

Answer 30

Reusable types that allow components or functions to work with any data type.

Question 31

How do you type useState with a custom type?

Answer 31

useState(initialValue)

Question 32

How do you type useRef with a DOM element?

Answer 32

useRef(null)

Question 33

How do you type event handlers in React?

Answer 33

Use React types like React.ChangeEvent.

Question 34

How do you type children in React components?

Answer 34

Use 'children: React.ReactNode' in the props interface.

Question 35

How do you handle default props in TypeScript?

Answer 35

Set default values in destructuring or use default parameters.

Question 36

How do you use enums in React with TypeScript?

Answer 36

Define an enum and use it as a prop or state type.

Question 37

How do you type functional components?

Answer 37

Use FC or define props explicitly with generics.

Question 38

What is React.FC?

Answer 38

A type for functional components that automatically includes children.

Question 39

When should you avoid using React.FC?

Answer 39

When you want explicit control over props and children typing.

Question 40

What is the difference between interface and type in TypeScript?

Answer 40

Both define object shapes; interfaces are extendable and preferred for public APIs.

Question 41

What is the purpose of a tsconfig.json file?

Answer 41

It configures the behavior of the TypeScript compiler.

Question 42

What is ESLint used for?

Answer 42

To analyze code for errors and enforce coding standards.

Question 43

What is Prettier?

Answer 43

An opinionated code formatter for consistent code style.

Question 44

What is Vite?

Answer 44

A fast frontend build tool that supports React and TypeScript with HMR.

Question 45

What is Create React App?

Answer 45

A tool to bootstrap React projects with sensible defaults.

Question 46

How do you install TypeScript in a React project?

Answer 46

Use 'npm install typescript @types/react @types/react-dom'.

Question 47

What is React Testing Library?

Answer 47

A testing utility focused on testing components from the user's perspective.

Question 48

What is the difference between shallow and full rendering in tests?

Answer 48

Shallow renders only the component, full rendering includes child components.

Question 49

How do you handle form validation in React + TS?

Answer 49

Use form libraries like react-hook-form with typed schemas.

Question 50

What is a discriminated union in TypeScript?

Answer 50

A union of object types that include a common literal property for type narrowing.