React JS Quiz ( Beginner ) - All Questions

This beginner-level React JS quiz is designed to help learners test and strengthen their understanding of core React concepts such as components, JSX, props, state, and hooks. Perfect for students, freshers, and developers starting their React journey or preparing for interviews.

Question 1: What is React primarily used for?

Database management
Building user interfaces
Server-side scripting
Operating system development

Explanation: React is mainly used to build fast and interactive user interfaces.

Question 2: Who developed React JS?

Google
Microsoft
Facebook
Amazon

Explanation: React was developed by Facebook (now Meta).

Question 3: What is JSX in React?

A database query language
A JavaScript extension for writing HTML-like code
A CSS framework
A testing library

Explanation: JSX allows developers to write HTML-like syntax inside JavaScript.

Question 4: Which command is commonly used to create a React app?

npm install react
npx create-react-app
react new app
npm init react

Explanation: npx create-react-app is the standard command to create a new React application.

Question 5: What is a React component?

A database table
A reusable UI block
A CSS file
A backend service

Explanation: Components are reusable pieces of UI in React.

Question 6: Which keyword is used to create a class component?

function
class
component
constructor

Explanation: Class components are created using the JavaScript class keyword.

Question 7: How do you pass data to a component in React?

Using state
Using props
Using hooks
Using render

Explanation: Props are used to pass data from parent to child components.

Question 8: What hook is used to manage state in functional components?

useEffect
useState
useRef
useContext

Explanation: useState allows functional components to manage state.

Question 9: What does the virtual DOM do?

Replaces the real DOM
Improves performance by minimizing DOM updates
Stores application data
Handles routing

Explanation: The virtual DOM optimizes performance by updating only changed elements.

Question 10: Which attribute is used instead of class in JSX?

class
css
className
style

Explanation: JSX uses className instead of class.

Question 11: What must every React component return?

Multiple root elements
A single root element or fragment
Only strings
Only HTML

Explanation: A React component must return a single root element or a fragment.

Question 12: Which symbol is used to embed JavaScript in JSX?

()
{}
[]
<>

Explanation: Curly braces are used to embed JavaScript expressions in JSX.

Question 13: What happens when state changes in React?

Page reloads
Component re-renders
Browser crashes
Nothing happens

Explanation: React re-renders the component when state changes.

Question 14: How are events written in React?

onclick
onClick
on_click
click

Explanation: React uses camelCase event handlers like onClick.

Question 15: What is props short for?

Properties
Prototypes
Processes
Providers

Explanation: Props stands for properties.

Question 16: Can props be changed inside a component?

Yes
Only in class components
Only in functional components
No

Explanation: Props are read-only and cannot be modified.

Question 17: Which hook is used for side effects?

useState
useEffect
useMemo
useReducer

Explanation: useEffect handles side effects like API calls.

Question 18: Why are keys used in React lists?

For styling
For routing
For efficient rendering
For state management

Explanation: Keys help React identify changed elements efficiently.

Question 19: React is best described as?

Framework
Library
Programming language
Database

Explanation: React is a JavaScript library.

Question 20: How do you write comments in JSX?

//
{/* */}
#

Explanation: JSX comments are written inside curly braces.

Question 21: What is lifting state up?

Deleting state
Moving state to a parent component
Using props
Using hooks

Explanation: Lifting state up helps share data between components.

Question 22: Which hook is used to access context?

useState
useEffect
useContext
useRef

Explanation: useContext allows components to consume context values.

Question 23: Which package renders React to the DOM?

react
react-dom
redux
axios

Explanation: react-dom is responsible for rendering to the DOM.

Question 24: Which lifecycle method runs after component mount?

render
componentDidMount
componentWillUnmount
shouldComponentUpdate

Explanation: componentDidMount runs after the component is mounted.

Question 25: What does useState return?

Only state
Only function
State and update function
Boolean value

Explanation: useState returns the state and a function to update it.

Question 26: What is React Fragment used for?

Styling
Grouping elements without extra DOM nodes
Routing
State management

Explanation: Fragments avoid unnecessary wrapper elements.

Question 27: React follows which data flow?

Two-way
One-way
Circular
Random

Explanation: React follows one-way data binding.

Question 28: Which library is commonly used for routing?

Redux
Axios
React Router
Formik

Explanation: React Router is used for navigation and routing.

Question 29: What is conditional rendering?

Rendering CSS
Rendering based on conditions
Rendering APIs
Rendering hooks

Explanation: Conditional rendering shows UI based on logic.

Question 30: Which operator is often used for conditional rendering?

Explanation: Logical && is commonly used for conditions in JSX.

Question 31: Which method updates state in class components?

updateState
setState
changeState
useState

Explanation: setState updates state in class components.

Question 32: JSX is compiled into?

HTML
CSS
JavaScript
JSON

Explanation: JSX is converted into JavaScript.

Question 33: Which hook helps with performance optimization?

useEffect
useState
useMemo
useContext

Explanation: useMemo memoizes values to improve performance.

Question 34: What are default props used for?

Validation
Fallback values
State updates
Styling

Explanation: Default props provide values when none are passed.

Question 35: Which file is the entry point of a React app?

app.js
index.js
main.js
start.js

Explanation: index.js is the main entry point.

Question 36: What does StrictMode do?

Improves UI
Highlights potential issues
Adds security
Manages routing

Explanation: StrictMode helps identify potential problems.

Question 37: Which hook replaces componentDidMount?

useState
useEffect
useRef
useReducer

Explanation: useEffect with empty dependency acts like componentDidMount.

Question 38: What is useRef mainly used for?

State management
DOM access
API calls
Routing

Explanation: useRef is used to access DOM elements.

Question 39: React architecture is based on?

MVC
Component-based
Monolithic
Layered

Explanation: React follows a component-based architecture.

Question 40: What is the biggest advantage of React?

Slow rendering
Reusable components
Complex code
Limited support

Explanation: Reusable components make development easier.

Question 41: Which function mounts React to the DOM?

React.render
renderDOM
ReactDOM.render
mount

Explanation: ReactDOM.render mounts React components to the DOM.

Question 42: Which hook is used to manage side effects only once?

useEffect with no dependency array
useEffect with empty array
useState
useMemo

Explanation: Empty dependency array runs effect only once.

Question 43: What does npm stand for?

Node Package Manager
New Package Module
Node Program Manager
Network Package Manager

Explanation: npm stands for Node Package Manager.

Question 44: Which of the following is immutable in React?

State
Props
Refs
Context

Explanation: Props are immutable and read-only.

Question 45: Which hook allows function components to have lifecycle behavior?

useState
useEffect
useContext
useRef

Explanation: useEffect enables lifecycle-like behavior.

Question 46: What is the correct way to export a component?

export component
export default Component
default export Component
component export

Explanation: export default is used to export a component.

Back to programming Quizzes

React JS Quiz ( Beginner )

Questions

~15

Minutes

Min Limit