React.
js Interview Questions &
Answers
Beginner/Fresher Level
By Brijisha Doshi
What is React.js?
• React.js is an open-source, front-end
JavaScript library for building UIs using
components. It is declarative, efficient, and
flexible.
Key Features of React
• - Component-Based
• - Declarative
• - Virtual DOM
• - Unidirectional Data Flow
• - JSX
What is JSX?
• JSX is a syntax extension for JavaScript. It
allows writing HTML-like code inside
JavaScript and improves readability.
What is Virtual DOM?
• A lightweight in-memory representation of the
real DOM. React uses it to efficiently update
only changed parts.
Real DOM vs Virtual DOM
• - Real DOM: Slow updates
• - Virtual DOM: Fast updates with diffing
What are React Components?
• Reusable, independent blocks that return
elements to render UI. They accept props and
manage state.
Functional vs Class Components
• - Functional: Simpler, use hooks, no 'this'
• - Class: Stateful, lifecycle methods, uses 'this'
What are Props?
• Read-only data passed from parent to child
components. Used to configure components.
What is State?
• Internal mutable data that controls
component behavior and re-renders on
change.
Props vs State
• | Feature | Props | State |
• |---------|-------|-------|
• | Mutable | No | Yes |
• | Ownership | Parent | Self |
• | Purpose | Config | Data |
Passing Data Between Components
• - Parent to Child: via props
• - Child to Parent: via callbacks
• - Sibling to Sibling: lift state up
What are React Hooks?
• Hooks let you use state and lifecycle in
functional components. Introduced in React
16.8 to simplify logic reuse.
Common React Hooks
• - useState
• - useEffect
• - useContext
• - useRef
useState Hook
• Enables state in functional components.
• Example:
• const [count, setCount] = useState(0);
useEffect Hook
• Used for side effects like data fetching or
timers. Runs after render.
Dependency Array in useEffect
• Controls when useEffect runs.
• [] = once,
• [x] = on change,
• none = every render
Conditional Rendering
• Render UI based on logic using if, ? : , or &&
operators.
Lists and Keys
• Use array.map() to render lists.
• Keys help React track items for efficient
rendering.
Controlled Components
• Form elements managed via React state.
• Value changes through onChange event.
Uncontrolled Components
• Form elements managed by the DOM using
refs. Less control, less code.
What is Prop Drilling?
• Passing props through many levels
unnecessarily.
• Avoid using Context API or state management.
What is React Router?
• Library for client-side routing in SPAs. Map
URLs to components without reloading.
Purpose of render() in Class
Components
• The render() method returns JSX and is
required in class components.
Handling Events in React
• Use camelCase like onClick. Functions are
passed as handlers. Use preventDefault()
when needed.
Key Prop in Lists
• Key helps React track items in lists. Must be
unique and stable.
Optimizing Functional Components
• - useMemo
• - useCallback
• - React.memo
• - Minimize re-renders
What is a Higher-Order Component
(HOC)?
• A function that takes a component and
returns an enhanced component.
When to use a HOC?
• For logic reuse like authentication, data
fetching, theming.
What is Context API?
• Allows global data access without prop
drilling. Use createContext and Provider.
When to use Context API?
• For shared data like theme, auth, or language
settings.
React.StrictMode
• Highlights issues during development. No
impact in production.
What is Lifting State Up?
• Moving shared state to the nearest common
parent component.
What are Fragments?
• Let you return multiple elements without
adding extra DOM nodes. Shorthand: <>...</>
Purpose of ReactDOM.render()
• Mounts the React component tree to the
DOM.
• Example:
• ReactDOM.render(<App />, root);
npm vs npx
• - npm: Installs packages
• - npx: Runs packages without installing
globally
Let’s Collaborate!
• This presentation was created and shared by
Brijisha Doshi to support the React developer
community.
• Want to contribute?
• • Add your own React questions.
• • Update with your insights.
• • Re-share with the dev community.
