React JS Online Test

📘 Premium Read: Access my best content on Medium member-only articles — deep dives into Java, Spring Boot, Microservices, backend architecture, interview preparation, career advice, and industry-standard best practices.

✅ Some premium posts are free to read — no account needed. Follow me on Medium to stay updated and support my writing.

🎓 Top 10 Udemy Courses (Huge Discount): Explore My Udemy Courses — Learn through real-time, project-based development.

▶️ Subscribe to My YouTube Channel (172K+ subscribers): Java Guides on YouTube

Welcome to our React JS Online Test, designed to assess your understanding and skills in working with React, one of the most popular JavaScript libraries for building user interfaces. 

This test comprises 25 multiple-choice questions (MCQs) that cover a wide range of topics within React, including components, state management, lifecycle methods, hooks, and best practices in React development. 

Whether you are a beginner looking to gauge your learning progress or an experienced developer seeking to validate your expertise, this test provides a comprehensive platform to demonstrate your proficiency. Each question has been carefully crafted to challenge your knowledge and ensure you have a solid grasp of key React concepts. Good luck, and may this test help you advance your development.

1. What is the default port number where a create-react-app project runs locally?

a) 3000

b) 8080

c) 5000

d) 8000

2. Which of the following is used in React to increase performance by reusing existing DOM elements?

a) Virtual DOM

b) Shadow DOM

c) Real DOM

d) Browser DOM

3. What is the correct way to change the state in React?

this.setState({
    count: this.state.count + 1
});

a) this.state.count = this.state.count + 1

b) this.setState({ count: this.state.count + 1 })

c) this.set({ count: this.state.count + 1 })

d) this.state({ count: this.state.count + 1 })

4. Which lifecycle method is invoked immediately after a component is mounted on the DOM?

a) componentWillMount

b) componentDidMount

c) componentDidUpdate

d) componentWillUpdate

5. What is a higher-order component in React?

a) A component that renders another component

b) A function that takes a component and returns a new component

c) A callback function used as a component

d) An array of components

6. Consider the following code snippet. What will it render on the screen?

function App() {
    return (
       <div>{false}</div>
    );
}

a) false

b) 0

c) Nothing

d) true

7. Which of the following is a hook in React for managing state in functional components?

a) useState

b) componentDidMount

c) renderState

d) componentDidUpdate

8. What does the following code do in a React component?

useEffect(() => {
    document.title = "Updated Title";
}, []);

a) Changes the document title every time the component re-renders

b) Changes the document title once after the initial rendering

c) Causes an infinite loop updating the document title

d) Updates the document title every time the state changes

9. How can you access props in a class component in React?

a) this.prototype.props

b) props.this

c) this.props

d) getProps()

10. What will this component display in the browser?

class Message extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}!</h1>;
    }
}
ReactDOM.render(<Message name="David" />, document.getElementById('root'));

a) Hello, David!

b) Hello, {name}!

c) Hello, !

d) An error message

11. What does the key prop do in a list of elements in React?

a) It helps React identify which items have changed, are added, or are removed.

b) It increases performance by forcing a component to re-render.

c) It allows an element to maintain state across re-renders.

d) It hides the element from the virtual DOM.

12. What is a Fragment in React?

a) A method to send props to child components

b) An object that holds the state values of a component

c) A way to group a list of children without adding extra nodes to the DOM

d) A component used to keep the UI in sync with the state

13. What is props.children in React?

a) Properties that are passed to the child components

b) A property that stores all the direct children of a component

c) A reference to the children instances of a component

d) A method to clone the props of a component

14. What will happen if you call setState inside the render method?

a) The component will re-render successfully without any issues.

b) The code will throw an error because it's forbidden.

c) It may lead to an infinite loop as each setState invocation causes the component to re-render.

d) Nothing, setState calls are ignored inside the render method.

15. Which of the following is true about uncontrolled components in React?

a) They maintain their own internal state

b) They do not require state handling

c) They cannot handle user input

d) They are always stateless

16. How do you pass a parameter to an event handler or callback in React?

a) By using an arrow function in the JSX callback.

b) By using the bind method in the constructor.

c) Both a) and b) are correct.

d) None of the above.

17. Which hook should be used for performing side effects in functional components?

a) useReducer

b) useEffect

c) useContext

d) useRef

18. What is the useContext hook used for in React?

a) Managing global state across all components.

b) Subscribing to a context object for a component tree.

c) Triggering re-renders in specific components.

d) Handling form submissions.

19. What happens when you use the useState hook multiple times in a single component?

a) React keeps track of state hooks by their order in the component.

b) It causes a memory leak in the application.

c) Each state hook overrides the previous one.

d) The component unmounts and remounts.

20. How do you prevent a function from being called too frequently with rapid events, like window resizing?

a) Use useMemo

b) Use useCallback

c) Use useReducer

d) Use useEffect

21. In a typical React application, where should web API calls be made with hooks?

a) inside useEffect at the component's top level

b) directly in the component body

c) inside useMemo

d) inside the render method

22. What is the main difference between useMemo and useCallback?

a) useMemo returns a memoized value, useCallback returns a memoized function.

b) useMemo triggers during the render phase, useCallback does not.

c) There is no difference, both hooks do the same thing.

d) useMemo is used only for state management, while useCallback is used for rendering optimization.

23. Which statement is true about the key prop in React?

a) Keys need to be unique among siblings only.

b) Keys should be globally unique across the whole app.

c) Keys can be duplicated if they are in different components.

d) Keys are optional in all aspects of React.

24. Consider the following component:

function MyComponent({ shouldRender }) {
    if (!shouldRender) {
        return null;
    }
    return <div>Hello</div>;
}

a) To render an empty space in the UI.

b) To prevent the component from rendering.

c) To indicate a loading state.

d) To trigger an error.

25. What is the purpose of React.memo?

a) To memorize a component to prevent unnecessary re-renders.

b) To store component state in local storage.

c) To delay the rendering of a component.

d) To render components asynchronously.