Font size
WorksheetsReact-Test
Total questions: 115
Worksheet time: 49mins
Which of the following is not a disadvantage of React.js?
React.js has only a view layer. We have put your code for Ajax requests, events and so on
The library of React.js is pretty large
The JSX in React.js makes code easy to read and write.
The learning curve can be steep in React.js.
What is the main advantage of using React.js?
React.js has only a view layer. We have put your code for Ajax requests, events and so on
The library of React.js is pretty large
The JSX in React.js makes code easy to read and write.
React.js allows for easy component reusability and modularity.
Which feature of React.js helps in improving code readability?
React.js has only a view layer. We have put your code for Ajax requests, events and so on
The library of React.js is pretty large
The JSX in React.js makes code easy to read and write.
React.js allows for easy component reusability and modularity.
What is a potential challenge when learning React.js?
React.js has only a view layer. We have put your code for Ajax requests, events and so on
The library of React.js is pretty large
The JSX in React.js makes code easy to read and write.
The learning curve can be steep in React.js.
Does React.js create a VIRTUAL DOM in the memory?
TRUE
FALSE
Can be true or false
Cannot say
What is the purpose of JSX in React.js?
To make code more difficult to read and write
To handle Ajax requests and events
To improve code readability and maintainability
To increase the library size
Which statement best describes the learning curve of React.js?
It is very easy to learn with minimal effort
It has a steep learning curve initially
There is no learning curve at all
It is impossible to learn React.js
How does React.js facilitate component reusability?
By making components difficult to reuse
By limiting the number of components that can be created
By allowing easy creation and reuse of components
By removing the concept of components altogether
What are the two ways to handle data in React?
State & Props
Services & Components
State & Services
State & Component
What is the significance of the virtual DOM in React.js?
It helps in improving code readability
It speeds up the rendering process
It increases the library size
It has no impact on React.js
How does React.js handle data flow between components?
By using only state for data management
By passing data through props
By directly modifying the DOM elements
By creating a separate data layer
What role does the 'key' attribute play in React.js?
It is used to uniquely identify components in lists
It determines the color scheme of the UI
It controls the state of the components
It is not a valid attribute in React.js
Which of the following is used to pass data to a component from outside in React?
props
render with arguments
setState
PropTypes
What describes the ReactJS?
Server Side Framework
Client Side Framework
Both A & B
None of these
ReactJS written in which language?
PHP
JAVASCRIPT
JAVA
NONE OF THIS
What is the purpose of React state?
To store static data
To store styles
To store dynamic data
o store function
What is the use of React hooks?
To manage state and side effects in functional components
To manage styles in functional components
To manage state and side effects in class components
To manage styles in class components
What is the purpose of useEffect hook in React?
To add event listeners
To perform side effects
To render components
To manage state
What is the purpose of useState hook in React?
To manage state in functional components
To manage side effects in functional components
To manage state in class components
To manage side effects in class components
What is the purpose of Higher Order Components (HOCs) in React?
To share data between components
To reuse component logic
To manage component styles
To manage component events
What is the difference between state and props in React?
Props are mutable, state is immutable
Both state and props are mutable
Both state and props are immutable
State is mutable, props are immutable
What is React state used for?
To manage external data sources.
To manage global application data.
To handle routing in React applications.
To store and manage component-specific data that can change over time.
Which hook is commonly used for managing state in functional components in React?
useEffect
useState
useContext
useRef
In a React component, how do you access and modify state?
Using the state property and setState method.
By directly modifying the state variable.
State cannot be accessed or modified in class components.
Using the props property.
What is the purpose of the setState function in React?
To retrieve the current state.
To delete the state.
To set a new state value.
To create a state variable.
How do you initialize a state variable called count with an initial value of 0?
const [count, setCount] = useState(0);
const count = 0;
const count = useState(0);
const count = setState(0);
const setCount = setState(0);
React.Js is a __________?
Framework
Library
None of these.
Which concept includes OOP's?
Functional Components
Class Components
React.Js was created by ___________?
Microsoft
What was the Output?
const [data , setData] = useState("Alex");
console.log(data);
data
data Alex
Alex
React is for building _________
Connectivity
User Interface
Database
Will useEffect affect other data?
True
False
Which is the correct syntax?
onclick
Onclick
onClick
OnClick
What is React.Js used for?
Server-Side
Client-Side
For Both
Axios is an __________?
Framework
Library
Package
All These Above
Is React.JS is paid?
Yes
No
What is JSX?
A combination of JavaScript and XML
A new version of JavaScript
The output of a React project
Why would you use JSX to create a React application?
JSX is the only supported method for creating React applications.
JSX allows for good code management. It injects the necessary logic with your HTML.
JSX is supported by all browsers.
What is the purpose of a bundler in web development?
To generate JSX
To convert JSX and other resources into JavaScript
To bootstrap an application
React is a
Full-stack framework
Front-end library
CSS framework
React is created by
Microsoft
Meta
How many elements a valid react component can return?
2
1
4
Unlimited
Browsers natively support JSX.
True
False
Which syntax is used to display dynamic data?
Chocobars
Menubars
Handlebars
What do you call the message wrapped in curly braces below?
let message = 'Hi there';
const element = <p>{message}</p>;
A JS function
A JS element
A JSX wrapper
A JS expression
Which of the following is not a disadvantage of React.js?
React.js has only a view layer. We have put your code for Ajax requests, events and so on.
The library of React.js is pretty large.
The JSX in React.js makes code easy to read and write.
The learning curve can be steep in React.js.
What would be the output of the following example?
var Helloworld=(props)=> {
return(
<div>
Hello World 1
</div>
<div>
Hello World 2
</div>
);
}
ReactDOM.render(<Helloworld/>,mountNode)
Hello World 1
Hello World 2
Hello World 1 Hello World 2
Error
Which of the following is used to pass data to a component from outside in React.js?
SetState
Render with arguments
Props
PropTypes
What does ES6 stand for?
ECMAScript 6
ECMA 6
ECMAJavaScript 6
EJavaScript 6
What is Babel?
A JavaScript transpiler
A JavaScript interpreter
A JavaScript Compiler
None of the above
React is used mainly for building ........
Database
User interface
Connectivity
Design platform
Which function is used to change the state of react component?
this.State{}
this.setState
this.setChangeState
None of the Above
What do you call the message wrapped in curly braces below?
let message = 'Hi there';
const element = <p>{message}</p>;
A JS function
A JS element
A JSX wrapper
A JS expression
What will be logged in the console after this code runs?
const [count, setCount] = useState<number>(0);
setCount(5);
console.log(count);
5
0
undifined
Error
Which is the correct way to update a boolean state?
const [isOpen, setIsOpen] = useState<boolean>(false);
setIsOpen(true)
setIsOpen = true
isOpen = true
setIsOpen(false = true)
What is the best way to update state based on a previous state?
const [count, setCount] = useState<number>(0);
setCount(count + 1)
setCount(prev => prev + 1)
count++
setCount = count + 1
What will this render initially?
const [title, setTitle] = useState<string | null>(null);
return <h1>{title ?? "Default Title"}</h1>;
null
"title"
"Default Title"
Undifined
What will be the value of input after this function?
const [input, setInput] = useState<string>("");
const handleChange = () => {
setInput("Updated");
};
""
"Updated"
undefined
null
What is the primary purpose of useEffect in React?
To create state variables
To fetch and manage props
To handle side effects in functional components
To update the DOM manually
useEffect(() => {
console.log("Hello");
}, []);
Run on every render
Never run
Run once after initial render
Run only when a button is clicked
When does useEffect run if no dependency array is provided?
useEffect(() => {
console.log("Effect");
});
Only once
Never
After every render
Only after state changes
What will be the output of this code?
const [count, setCount] = useState(0);
useEffect(() => {
console.log("Count changed");
}, [count]);
Logs only on initial render
Logs every time count changes
Never logs
Logs once then never again
Which best describes this behavior?
useEffect(() => {
console.log("Component mounted");
}, []);
Mount and update
Update only
Mount only
Unmount only
Which import is correct for using useEffect?
import { useEffect } from 'vite'
import { useEffect } from 'vite'
import { useEffect } from 'vite'
import { useEffect } from 'vite'
What is the type of the cleanup function in useEffect?
() => string
() => void
number
boolean
What is the main purpose of useContext in React?
Managing local component state
Sharing data globally across components
Handling side effects
Styling components
What is the correct import for useContext?
import { useContext } from 'vite'
import useContext from 'react'
import { useContext } from 'react'
import useContext from 'vite-react'
What must be passed into useContext()?
A reducer
A state setter
A context object
A JSX element
What will be printed to the console?
const MyContext = React.createContext("default");
const Child = () => {
const value = useContext(MyContext);
console.log(value);
return null;
};
<MyContext.Provider value="custom">
<Child />
</MyContext.Provider>
"default"
"custom"
undefined
null
How many times does a component re-render when the context value changes?
Never
Once per prop change
Once per context value change
Infinite times
In React with TypeScript, what is the primary purpose of useReducer?
To replace useEffect
To manage complex state logic in a predictable way
To improve rendering speed
To handle routing
Which of the following is the correct TypeScript syntax for declaring useReducer?
const [state, dispatch] = useReducer(reducer, initialState)
const [state, dispatch] = useReducer<StateType, ActionType>(reducer, initialState)
const state = useReducer(reducer, initialState)
useReducer(reducer, state)
In a TypeScript useReducer, what type is dispatch?
(action: ActionType) => void
(state: StateType) => void
(action: any) => any
Function
Which hook is best suited for state logic involving multiple sub-values and complex updates?
useState
useEffect
useReducer
useDemo
In React + TypeScript, which is the correct way to define an action union type?
type Action = { type: 'ADD' } | { type: 'REMOVE', payload: number };
interface Action { type: string; }
type Action = { type: string; payload: any };
Action = { type: 'ADD' };
When using TypeScript with useReducer, what does the generic <S, A> represent?
S = State type, A = Action type
S = String type, A = Array type
S = Source type, A = Action type
S = State value, A = Async handler
What is the main purpose of the useRef hook in React?
To store mutable values that persist across renders
To trigger component re-renders
To handle asynchronous code
To store state history
What type of object does useRef return?
{ current: T }
{ value: T }
T directly
RefObject<T> without current
What is the main purpose of useMemo in React?
To store mutable values between renders
To memoize computed values to avoid unnecessary recalculations
To trigger component re-renders
To store DOM references
What is the first argument passed to useMemo?
A dependency array
A callback function returning the computed value
An initial value
A reducer function
What is the second argument of useMemo?
The initial value
The dependency array
The state variable
The reducer
Which is true about useMemo and performance?
Which is true about useMemo and performance?
It can cause unnecessary overhead if overused
It is required for all calculations
It is faster than plain variables
What is the main purpose of React.memo?
To memoize functions
To memoize component rendering and avoid unnecessary re-renders
To store mutable state
To optimize API calls
What is the correct TypeScript syntax to wrap a component with React.memo?
export default React.memo(MyComponent);
export default memo(MyComponent);
export default MyComponent.memo();
export default React.useMemo(MyComponent);
How can you prevent unnecessary re-renders if props are objects?
Use useRef
Use useCallback / useMemo to memoize the object or function props
Use React.StrictMode
Use a reducer
Which hook works well with React.memo to keep function props stable?
useState
useEffect
useCallback
useReducer
What is the primary purpose of useCallback?
To memoize values
To memoize functions so they don’t get re-created unnecessarily
To store mutable values
To trigger re-renders
Which is the correct syntax for useCallback?
useCallback(fn, deps)
useCallback(deps, fn)
useCallback(() => fn, deps)
useCallback(fn)
What is the main benefit of useCallback when passing callbacks to deeply nested components?
It increases state updates speed
It keeps function references stable, reducing unnecessary renders
It prevents memory leaks
It automatically caches results
Which hook is best for memoizing expensive calculations:
useCallback
useMemo
React.memo
useReducer
JSX is necessary to work with React.js?
True
False
React is mainly for building ___
Database
Connectivity
User interface
Design Platform
Which is used to keep the value of components unique?
Ref
Key
store
Data
useEffect(() => { setDone(true); });
useEffect(() => { setDone(true); }, []);
useEffect(() => { setDone(true); }, [setDone]);
useEffect(() => { setDone(true); }, [done, setDone]);
Remove this
Capitalize clock
Remove the render method
Add quotes around the return value
Why might you use a ref?
to directly access the DOM node
to refer to another JS file
to bind the function
to call a function
{{name: "Venkat", age: 30}}
{name: "Venkat", age: 30}
{person: "Venkat", person: 30}}
{person: {name: "Venkat", age: 30}}
Error. Cannot use direct JavaScript code in JSX
Error. Should be replaced with a for..loop for correct output
Displays the list of languages in the array
Displays nothing
What does this React element look like given the following function?
React.createElement('h1', null, "What's happening?");
<h1 props={null}>What's happening?</h1>
<h1>What's happening?</h1>
<h1 id="component">What's happening?</h1>
<h1 id="element">What's happening?</h1>
How do you write an inline style specifying the font-size:12px and color:red; in JSX?
style={{font-size:12,color:'red'}}
style={{fontSize:'12px',color:'red'}}
style={fontSize:'12px',color:'red'}
style={{font-size:12px,color:'red'}}
What does npm stand for?
Node Project Manager
Node Program Manager
Node Package Manager
Network Package Manager
What is the primary purpose of npx?
To manage Node.js versions.
To create new Node.js projects.
The primary purpose of npx is to execute Node.js packages without global installation.
To install Node.js packages globally.
What is JSX commonly used for?
JSX is used for styling CSS files.
JSX is commonly used for building user interfaces in React.
JSX is primarily used for database management.
JSX is a programming language for backend development.
How do props function in React?
Props are only for rendering static content in React.
Props are used to style components in React.
Props function as a mechanism for passing data and event handlers to React components.
Props are a type of state management in React.
What is the role of nvm in Node.js development?
nvm is a framework for building Node.js applications.
nvm is used to compile Node.js from source code.
nvm is a package manager for Node.js libraries.
nvm is used to manage multiple Node.js versions in development.
Can you install packages globally using npm?
You can only install packages globally with yarn.
Yes, you can install packages globally using npm.
Global installation is not supported by npm.
No, npm only allows local installations.
What is the difference between npm install and npx?
npm install installs packages; npx runs packages without installing them globally.
npm install is used for running scripts; npx is for managing dependencies.
npm install runs packages without installing them; npx installs packages locally.
npm install updates existing packages; npx installs packages globally.
How do you pass props to a child component in React?
Pass props using a global state management library.
Use CSS to style the child component.
Use JSX syntax to pass props, e.g.,
Directly modify the child component's code to include props.
What file extension is typically used for JSX files?
.jsx
.js
jsx
.html
What command would you use to create a new React app using npx?
npx create-app my-app
npx react-app my-app
npm create-react-app my-app
npx create-react-app my-app
What is the significance of the package.json file in a project?
It is used for writing server-side code in Python.
It serves as a database for project files.
The package.json file is significant for managing project dependencies and configurations in a Node.js project.
The package.json file is only for storing user information.
How can you switch Node.js versions using nvm?
Run 'nvm set
Use 'nvm switch
Use 'nvm use
Execute 'nvm change
What is a common use case for using JSX in a project?
Creating user interfaces in React applications.
Building server-side applications
Designing static websites with HTML
Creating mobile apps with Flutter
How do you update a package using npm?
Run 'npm upgrade
Execute 'npm refresh
Use 'npm install
Use 'npm update
What is the command to uninstall a package using npm?
npm delete
npm purge
npm remove
npm uninstall
