1. What is ReactJS and why is it 8.

Create a simple counter app

widely used in web development? 6. Discuss state management in that increases/decreases the
Ans. ReactJS is a JavaScript library React applications. count by 1. What is useState
for building dynamic user interfaces Ans. State in React represents hook in react? What are the
using reusable components. It is dynamic data that in uences what advantages of using hooks?
widely used because its component- gets rendered. Local component (5+2+3)
based architecture, virtual DOM, state Ans.
and unidirectional data ow help can be managed using: The useState hook is a built-in
create fast, maintainable, and  Class Components: via this.state function in React that lets functional
scalable web applications. and this.setState. components manage local state. It
 Functional Components: via the takes an initial value as its argument
2. What is JSX, and how does it useState Hook, which returns the and returns an array with two
relate to JavaScript? current state and an updater elements: the current state value
Ans. JSX (JavaScript XML) is a function. and a function to update that state.
syntax extension that allows you to For larger or more complex When you call the update function,
write HTML-like code within applications, global state React re-renders the component
JavaScript. It management strategies can be with the new state. This hook
is transpiled into standard employed using the Context API, replaces the need for class-based
JavaScript, making UI code more Redux, or MobX. These tools help state management using this.state
readable and easier to maintain. share state across multiple and this.setState, making state
components without cumbersome management in functional
3. Explain the concept of props in prop drilling. components straightforward.
React. Each method has its own trade-offs: Key advantages in React
Ans. Props (short for properties) are  Local State: Simple and applications:
read-only inputs passed from parent encapsulated, best for isolated  Simpler Code & Less Boilerplate:
to child components. They component data. Hooks allow you to use state and
enable data ow and con guration  Global State: Useful for sharing other React features in functional
of components, making them data across many components, components without the need for
reusable and dynamic. though it may add complexity. class components and manual
Overall, choosing the right state binding of methods.
4. How does the useEffect Hook management approach depends on  Enhanced Reusability: With
function in managing side the app’s size, data ow complexity, custom hooks, you can extract and
effects? and maintenance requirements. reuse stateful logic across different
Ans. The useEffect hook runs after components.
the component renders. It takes a 7. Differentiate between  Improved Readability and
function to perform side effects such controlled and uncontrolled Maintainability: Hooks lead to
as data fetching or subscriptions, components in React. cleaner, more modular code,
and an optional dependency array Ans. A controlled component is one making it easier to manage
to control when the effect re-runs. in which form data (such as the component logic and side effects.
value of an input eld) is handled by
5. Describe the Virtual DOM in React state. In these components, 9. What is a state in ReactJS? How do you
handle events in React applications? What
React. every change triggers an onChange is useRef Hook and why is it used in
Ans. The virtual DOM is a event that updates the state, React? Give two examples of React Hooks
with their functions. How to install
lightweight, in-memory ensuring that the UI is always in libraries? Alternatively how to install
representation of the actual DOM. sync with the state. libraries with a speci c version?
When a component’s state or props Uncontrolled components, however, (2+2+2+2+1+1)
Ans. State is an object managed within a
change, React creates a new virtual maintain their own internal state. component that holds dynamic data. When
DOM tree and compares it to the Data is accessed using refs, state changes (using setState or useState),
previous version using a dif ng meaning that the DOM itself is the React re-renders the component, allowing the
UI to update interactively.
algorithm. source of truth. In React, events are handled by assigning
This process, known as Controlled components provide event handler functions (using camelCase
names) as props to JSX elements. These
reconciliation, identi es exactly what easier data validation and state handlers receive a synthetic event object that
has changed, and React then synchronization, while uncontrolled normalizes browser differences, ensuring
updates only those speci c parts of components are simpler to set up consistent behavior.The useRef hook creates
a mutable reference that persists across
the real DOM. This minimizes costly for simple use cases but offer less renders. It’s commonly used to access or
direct DOM manipulations and control over user input store a reference to a DOM element and to
greatly improves performance, hold mutable values without causing re-
renders.
particularly in large, dynamic Two examples of React Hooks:
applications.  useState: Manages local state within
In summary, the virtual DOM allows functional components.
 useEffect: Executes side effects (like data
React to optimize rendering by fetching) after rendering and updates when
reducing unnecessary updates, speci ed dependencies change.
To install:
resulting in a faster and more  Library with the latest version: npm install
responsive UI. . react
 Library with the speci c version: npm install
[email protected]
fi
fl
fi
fi
fi
fi
fl
fl
fl
fi
fi
fi
10. Difference between
Functional Components and
Class Components?
Functional Components Class
Components A functional
component is just a plain JavaScript
pure function that accepts props as
an argument and returns a React
element(JSX).
A class component requires you to
extend from React.
Component and create a render
function that returns a React
element.
There is no render method used in
functional components.
It must have the render() method
returning JSX (which is syntactically
similar to HTML)
Functional components run from top
to bottom and once the function is
returned it can’t be kept alive.
The class component is instantiated
and different life cycle method is
kept alive and is run and invoked
depending on the phase of the class
component.
Also known as Stateless
components as they simply
accept data and display them in
some form, they are mainly
responsible for rendering UI.
Also known as Stateful components
because they implement logic and
state.
React lifecycle methods (for
example, componentDidMount)
cannot be used in functional
components.
React lifecycle methods can be
used inside class components (for
example, componentDidMount).