React.
js Viva Questions and Answers
What is React.js?
React.js is a JavaScript library for building user interfaces, especially single-page
applications. It's maintained by Facebook and is component-based, meaning UI elements
are built as reusable components.
What are the main features of React?
- Virtual DOM
- JSX (JavaScript XML)
- Components
- Unidirectional data flow
- Lifecycle methods
- Hooks (in functional components)
What is JSX?
JSX stands for JavaScript XML. It allows you to write HTML inside JavaScript and place them
in the DOM without using createElement() or appendChild() methods.
What are components in React?
Components are independent, reusable pieces of UI in React. There are two types:
- Functional components
- Class components
What is the difference between functional and class components?
Functional components are simple functions and use hooks for state and side effects.
Class components are ES6 classes and use this.state and lifecycle methods.
What is the Virtual DOM?
The Virtual DOM is a lightweight copy of the real DOM. React uses it to compare changes
and updates only the parts of the real DOM that changed, improving performance.
What are props in React?
Props (short for properties) are read-only attributes passed from parent to child
components to pass data and configuration.
What is state in React?
State is a built-in object used to store property values that belong to a component. State can
change over time and triggers re-rendering.
Difference between props and state?
- Props: Passed from parent to child, read-only.
- State: Local to the component, can be changed with setState() or useState().
What is the use of useState hook?
useState is a React hook used in functional components to manage state.
Example: const [count, setCount] = useState(0);
How do you pass data from parent to child components?
Data is passed using props.
Example: <ChildComponent name="Anandhu" />
What is the purpose of key in React lists?
key helps React identify which items have changed, been added, or removed. It improves
performance in rendering lists.
What is the role of render() in class components?
render() is a required method in class components that returns the JSX to be rendered on
the screen.
What is React Fragment and why is it used?
React Fragments let you group multiple elements without adding extra nodes to the DOM.
Example: <><h1>Title</h1><p>Description</p></>
Explain the React lifecycle methods.
Lifecycle methods are special functions in class components:
- componentDidMount()
- componentDidUpdate()
- componentWillUnmount()
What is the difference between useEffect and lifecycle methods?
useEffect in functional components is used to perform side effects and replaces lifecycle
methods like componentDidMount, componentDidUpdate, and componentWillUnmount.
How does useEffect work?
useEffect runs after the component renders. You can control when it runs using the
dependency array.
What are controlled and uncontrolled components?
- Controlled: React controls the input via state.
- Uncontrolled: DOM manages its own state via refs.
What are higher-order components (HOC)?
HOCs are functions that take a component and return a new component with added
functionality.
What is context in React and how do you use it?
Context provides a way to pass data through the component tree without passing props
manually at every level.
What is Redux and how does it integrate with React?
Redux is a state management library. It stores the app’s state in a central store and allows
any component to access it.
What is the use of useRef hook?
useRef gives access to DOM elements or stores mutable values that don’t trigger re-renders.
What are React hooks? Name a few commonly used ones.
Hooks are functions that let you use state and other React features in functional
components.
Examples: useState, useEffect, useRef, useContext, useMemo, useCallback
How do you handle forms in React?
Use state to track input values and update them using onChange handlers.
What is conditional rendering in React?
Conditional rendering lets you render different UI based on a condition.
What are portals in React?
Portals let you render children into a DOM node outside the parent hierarchy.
How does React handle events?
React uses synthetic events — a cross-browser wrapper around the native event.
What is React Router and its advantages?
React Router is a routing library for React. It allows navigation between views without
refreshing the page.
What is lazy loading in React?
Lazy loading loads components only when needed, reducing the initial load time.
What are some performance optimization techniques in React?
- Memoization (React.memo, useMemo, useCallback)
- Code splitting
- Lazy loading
- Avoid unnecessary re-renders
- Proper key usage in lists
