React.js Core Concepts Quiz Quiz

Test your foundational knowledge of React.js with these easy interview-style questions covering JSX, Virtual DOM, Hooks, components, routing, state management, and more. Perfect for beginners preparing for React.js interviews or brushing up on key React concepts.

1. Understanding React.js

   Which of the following best describes React.js?

   1. A CSS preprocessor for styling
   2. A backend framework for building APIs
   3. A database management system
   4. A JavaScript library for building user interfaces

   Explanation: React.js is a JavaScript library specifically created to build user interfaces, mainly for single-page applications. It’s not a backend framework (like the second option) and does not handle API building. It is also not related to CSS pre-processing or database management, making those incorrect.

2. What is JSX?

   What does JSX allow you to do in React.js development?

   1. Run CSS animations on the server
   2. Write HTML-like code directly within JavaScript
   3. Connect directly to SQL databases
   4. Style components using SCSS syntax

   Explanation: JSX allows developers to write code resembling HTML alongside JavaScript, improving readability and organization within components. It does not offer special styling capabilities like SCSS (option two), does not enable database connection (option three), nor server-side CSS animation (option four).

3. Virtual DOM Concept

   How does React use the Virtual DOM to enhance performance?

   1. By storing all data in local storage
   2. By updating only changed elements instead of the entire DOM
   3. By enabling direct access to the hardware
   4. By running Java code to modify the browser DOM

   Explanation: React creates a Virtual DOM to track changes and updates only the parts of the real DOM that need to change, improving efficiency. It does not use Java code (option two), does not rely on local storage for DOM updates (option three), nor does it involve hardware access (option four).

4. Props vs State

   Which statement correctly describes Props in React?

   1. Props store backend configuration data
   2. Props are internal and can be changed by the component itself
   3. Props are used only for global state management
   4. Props are immutable values passed from a parent to a child component

   Explanation: Props are read-only data sent from a parent component and cannot be modified by the child. They are not for maintaining internal or backend state, nor are they exclusively for global data sharing. State, not props, is used for internal data management and changes within a component.

5. Component Types

   Which component type in React can use Hooks to manage state and lifecycle methods?

   1. Class components only
   2. Functional components
   3. External scripts
   4. HTML elements

   Explanation: Introduced in React 16.8, Hooks allow functional components to use state and lifecycle features, previously exclusive to class components. Class components can still use lifecycle methods traditionally, but do not use Hooks. HTML elements and external scripts are unrelated to React component logic.

6. React Hooks Basics

   What is the primary purpose of the useState Hook?

   1. To add state to functional components
   2. To handle HTTP requests for data
   3. To create new JavaScript files
   4. To style components with CSS

   Explanation: The useState Hook introduces state variables and update functions to functional components. It does not manage HTTP requests (option two), file creation (option three), or styling (option four); those have different solutions in React.

7. Context API Utility

   What problem does the Context API in React help solve?

   1. Avoiding prop drilling by sharing data globally
   2. Fetching remote APIs directly in templates
   3. Optimizing server load times
   4. Styling components with CSS-in-JS

   Explanation: The Context API allows you to share data across components without passing props through every intermediate component (prop drilling). It is not meant for direct API calls, does not handle CSS-in-JS (option three), or server optimizations (option four).

8. Controlled vs Uncontrolled Components

   In React, what differentiates a controlled component from an uncontrolled component?

   1. Controlled components cannot have refs
   2. An uncontrolled component only works with class components
   3. A controlled component accesses form values directly from the DOM
   4. A controlled component keeps form input values in the React state

   Explanation: Controlled components manage their form data via React state, allowing more predictable behavior. Uncontrolled components, not the controlled ones, access DOM values directly (option two). Uncontrolled components work with all types, and refs can appear in both.

9. Functional vs Class Components

   What is a major advantage of functional components over class components in modern React?

   1. Functional components require more boilerplate code
   2. Functional components can only be used for layout
   3. Functional components are more concise and use Hooks
   4. Functional components use lifecycle methods like componentDidMount()

   Explanation: Functional components are favored for their less verbose syntax and the power of Hooks for state and side-effects. They do not usually require boilerplate code (option two), use lifecycle methods as classes (option three), nor are they restricted to layout usage (option four).

10. React Router Role

    Why is React Router important in single-page applications?

    1. It manages backend server-side routing
    2. It adds CSS transitions between pages automatically
    3. It allows navigation between views without reloading the page
    4. It provides a built-in database

    Explanation: React Router enables client-side routing, switching between components without a full page reload. It does not manage backend routing, automatic CSS transitions, or offer database features, which eliminates the other options.

11. Performance Optimization

    Which of the following improves React app performance?

    1. Decreasing the application’s CSS file size
    2. Using React.memo to avoid unnecessary re-renders
    3. Automatically refreshing the browser
    4. Writing all code in a single file

    Explanation: React.memo is a tool that prevents components from re-rendering when their props haven't changed, saving processing time. Reducing CSS file size might help load times but is unrelated directly to React’s rendering. Combining all code or refreshing the browser does not affect performance within React.

12. useEffect Hook Role

    What is the useEffect Hook mainly used for in React functional components?

    1. Making components display responsive layouts
    2. Managing side effects like data fetching or event listeners
    3. Storing images in the DOM
    4. Creating new CSS stylesheets

    Explanation: The useEffect Hook is designed to handle side effects such as API calls, timers, or setting up event listeners in functional components. It does not handle styling, image storage, or layouts, which are managed by other tools or CSS.

13. Passing Data with Props

    How are props typically used in a React application?

    1. Props call backend APIs to fetch data
    2. Props pass data from parent components to child components
    3. Props manage static CSS values
    4. Props store the user’s browser settings

    Explanation: Props are the mechanism for passing data from a parent to a child component in React, making component reusability easier. They do not handle browser settings, API requests, or direct CSS management.

14. Unidirectional Data Flow

    What does 'unidirectional data flow' mean in the context of React.js?

    1. Data can only be pushed from the backend to the UI
    2. Data flows from the child to the parent automatically
    3. Data updates are possible in both directions between components
    4. Data flows from parent components to child components only

    Explanation: React follows unidirectional data flow, meaning data travels downward from parents to children via props. Data cannot flow automatically upward (option four), nor is it a bidirectional binding (option three), and backend push is not related (option two).

15. React Component Rendering

    What triggers a React component to re-render?

    1. Reinstalling the browser
    2. A change in its props or state values
    3. Styling changes in external CSS files
    4. Pressing F12 on the keyboard

    Explanation: A React component automatically re-renders when its state or props change to update the UI. Browser reinstallation, keyboard shortcuts, or pure CSS file changes will not cause React components to re-render, unless the update changes the rendered props or state.