React JS

Overview

Rewards

FAQs

Overview

React is a powerful JavaScript library developed by Facebook for building fast and interactive user interfaces, especially single-page applications. It uses a component-based architecture and a virtual DOM to efficiently manage and update the UI. This helps improve performance and makes complex interfaces easier to handle. React is widely used due to its flexibility, speed, and strong community support. It includes features like JSX for writing HTML-like syntax in JavaScript and hooks for managing state and side effects. React also integrates well with other libraries, making it ideal for modern web development.

Take this assessment to check where do you stand in the ReactJS.

Click the Rewards tab for eligibility requirements.

Read the FAQs tab carefully for Instructions before beginning the assessment.

Rewards

NYXPoints are used to generate the Leaderboard (coming soon). They are awarded for achieving a certain score.

200 nyxpoints for a passing score of 80% or more
300 nyxpoints for a perfect score of 100%
Didn’t pass? You still get 30 nyxpoints for attempting the assesment

FAQs

IMPORTANT instructions for taking the Assessment

The timer starts when you click Start Assessment
DO NOT refresh/reload the page or use the back button to navigate away from the page.
Navigating away from the assessment page DOES NOT stop/pause the timer and the will restart the assessment when you come back to it. The answers are NOT saved.

General

There are NO pre-requisites to take this assessment. Take this assessment even if you are completely new to Linux.
The assessment is completely FREE.
Preferably take it in a closed book mode.
DO NOT copy/paste, share or upload questions elsewhere.

Eligible Rewards

300 NyxCoins*

* NyxCoins vary on score

Questions

Minutes

1 %

Passing Score

Time limit: 0

Assessment Summary

0 of 30 Questions completed

Questions:

Information

You have already completed the assessment before. Hence you can not start it again.

Assessment is loading…

You must sign in or sign up to start the assessment.

You must first complete the following:

Results

Assessment complete. Results are being recorded.

Results

0 of 30 Questions answered correctly

Your time:

Time has elapsed

You have reached 0 of 0 point(s), (0)

Earned Point(s): 0 of 0, (0)
0 Essay(s) Pending (Possible Point(s): 0)

Average score
Your score

Categories

Not categorized 0%

Current
Review
Answered
Correct
Incorrect

Question 1 of 30

1. Question
What is the correct way to update state in React when your new state depends on the previous one?
- `setState(state + 1)`
- `setState(state => state + 1)`
- `setState({…state, count: state.count + 1})`
- `this.state = state + 1`
Correct

Incorrect
Question 2 of 30

2. Question
Which of the following is NOT a valid React Hook in wither React or React Router?
- `useEffect`
- `useState`
- `useHistory`
- `useRender`
Correct

Incorrect
Question 3 of 30

3. Question
In React, what is the purpose of keys when rendering lists?
- To make the list items look better
- To help React identify which items have changed, been added, or been removed
- To provide a unique ID for database operations
- Keys are optional and have no specific purpose
Correct

Incorrect
Question 4 of 30

4. Question
What is the correct React lifecycle method to make API calls in class components?
- `componentWillMount`
- `componentDidMount`
- `componentWillUpdate`
- `render`
Correct

Incorrect
Question 5 of 30

5. Question
What does the React `StrictMode` component do?
- It enforces type checking for all props
- It validates HTML syntax in JSX
- It highlights potential problems in the application by enabling additional checks and warnings
- It prevents the application from running in development mode
Correct

Incorrect
Question 6 of 30

6. Question
Which statement about React fragments is true?
- Fragments allow you to return multiple elements without adding extra nodes to the DOM
- Fragments require a `key` attribute when used
- Fragments can only contain a maximum of three child elements
- Fragments are deprecated in newer versions of React
Correct

Incorrect
Question 7 of 30

7. Question
Which hook would you use to run code only when the component mounts and unmounts?
- `useEffect(() => {}, [])`
- `useEffect(() => {})`
- `useState(() => {})`
- `useCallback(() => {}, [])`
Correct

Incorrect
Question 8 of 30

8. Question
What is the correct way to pass a prop called “name” to a component?
- `<Component {name="John"} />`
- `<Component name="John" />`
- `<Component props={name: "John"} />`
- `<Component props.name="John" />`
Correct

Incorrect
Question 9 of 30

9. Question
What’s the purpose of React context?
- To optimize rendering performance
- To handle HTTP requests
- To share data that can be considered "global" for a tree of React components
- To validate form inputs
Correct

Incorrect
Question 10 of 30

10. Question
What is the difference between controlled and uncontrolled components?
- Controlled components have their state controlled by Redux, uncontrolled components don't
- Controlled components have their state managed by React (typically via parent components); uncontrolled components store their own state internally using the DOM
- Controlled components follow a specific naming convention, uncontrolled don't
- There's no difference, these are just two different terms for the same concept
Correct

Incorrect
Question 11 of 30

11. Question
When is the best time to use `useMemo` hook?
- For every function in your component to improve performance
- For computationally expensive calculations that don't need to be re-computed on every render
- For all state variables to prevent unnecessary re-renders
- For API calls to ensure they're only made once
Correct

Incorrect
Question 12 of 30

12. Question
What is the purpose of React’s `useCallback` hook?
- To memoize function definitions between re-renders
- To create callback functions for event handlers
- To enable asynchronous operations in functional components
- To call a function after the component renders
Correct

Incorrect
Question 13 of 30

13. Question
What does the term “lifting state up” mean in React?
- Moving state from a child component to Redux
- Moving state from a child component to a parent component
- Moving state from local storage to component state
- Converting class components to functional components
Correct

Incorrect
Question 14 of 30

14. Question
What is Virtual DOM in React?
- A complete copy of the actual DOM that React maintains for diffing
- A lightweight JavaScript representation of the actual DOM
- A special browser feature that React utilizes for performance
- A DOM that only exists in memory and never renders to the screen
Correct

Incorrect
Question 15 of 30

15. Question
What is the correct way to conditionally render a component in React?
- `if (condition) { return <Component /> }`
- `condition && <Component />`
- `condition ? <Component /> : null`
- Both B and C are correct
Correct

Incorrect
Question 16 of 30

16. Question
What will be logged to the console when the button is clicked?

“`jsx

function Example() {

const [count, setCount] = useState(0);

function handleClick() {

setCount(count + 1);

setCount(count + 1);

console.log(count);

}

return <button onClick={handleClick}>Click me</button>;

}

“`
- 0
- 1
- 2
- undefined
Correct

Incorrect
Question 17 of 30

17. Question
What will be rendered by this component?

“`jsx

function Component() {

const [items, setItems] = useState([‘a’, ‘b’, ‘c’]);

return (

<div>

{items.length && <h1>Items: {items.length}</h1>}

</div>

);

}

“`
- `<h1>Items: 3</h1>`
- `<h1>Items: true</h1>`
- `3`
- An empty `<div>`
Correct

Incorrect
Question 18 of 30

18. Question
What’s wrong with this code?

“`jsx

function Parent() {

const [count, setCount] = useState(0);

function reset() {

setCount(0);

}

return (

<div>

<p>Count: {count}</p>

<Child reset={reset} />

</div>

);

}

function Child({reset}) {

return <button onClick={reset()}>Reset</button>;

}

“`
- The reset function is not being passed correctly to Child
- The onClick is calling reset immediately instead of on click
- Child should be declared inside Parent
- The reset function is missing a return statement
Correct

Incorrect
Question 19 of 30

19. Question
After clicking the button, what will be the value of `count`?

“`jsx

function Counter() {

const [count, setCount] = useState(0);

function handleClick() {

setTimeout(() => {

setCount(count + 1);

}, 1000);

setCount(count + 1);

}

return (

<div>

<p>Count: {count}</p>

<button onClick={handleClick}>Increment</button>

</div>

);

}

“`
- 1
- 2
- The component will throw an error due to improper use of setTimeout
- It depends on how fast you click
Correct

Incorrect
Question 20 of 30

20. Question
What will this component render?

“`jsx

function Example() {

const [state, setState] = useState({name: “John”, age: 30});

function handleClick() {

setState({name: “Jane”});

}

return (

<div>

<p>Name: {state.name}, Age: {state.age}</p>

<button onClick={handleClick}>Update</button>

</div>

);

}

“`
- Name: John, Age: 30
- Name: Jane, Age: 30
- Name: Jane, Age: undefined
- Name: John, Age: undefined
Correct

Incorrect
Question 21 of 30

21. Question
What will this useEffect do?

“`jsx

function Timer() {

const [count, setCount] = useState(0);

useEffect(() => {

const id = setInterval(() => {

setCount(prev => prev.count = prev.count + 1);

}, 1000);

return () => clearInterval(id);

}, []);

return <div>{count}</div>;

}

“`
- Increment count every second indefinitely
- Increment count once after one second
- Increment count to 1 and stop
- Throw an error
Correct

Incorrect
Question 22 of 30

22. Question
What will be rendered after clicking the button?

“`jsx

function App() {

const [show, setShow] = useState(true);

return (

<div>

<button onClick={() => setShow(!show)}>Toggle</button>

{show && <Child />}

</div>

);

}

function Child() {

useEffect(() => {

return () => console.log(“Cleanup”);

}, []);

return <p>Child component</p>;

}

“`
- "Child component" (and "Cleanup" in console)
- Nothing visible (and "Cleanup" in console)
- "Child component" (and nothing in console)
- Nothing visible (and nothing in console)
Correct

Incorrect
Question 23 of 30

23. Question
What will this code render?

“`jsx

function List() {

const items = [1, 2, 3];

return (

<ul>

{items.map(item => (

<li>{item}</li>

))}

</ul>

);

}

“`
- An unordered list with 3 items but React will log a warning about missing keys
- An unordered list with 3 items with no warnings
- A runtime error
- Nothing will render, the code won’t compile
Correct

Incorrect
Question 24 of 30

24. Question
What will this component render when it first appears on the screen?

“`jsx

function Example() {

const [data, setData] = useState(null);

useEffect(() => {

setData({name: “John”});

}, []);

return <div>{data?.name || “Loading…”}</div>;

}

“`
- "John"
- "Loading…"
- An empty div
- An error
Correct

Incorrect
Question 25 of 30

25. Question
What’s wrong with this custom hook?

“`jsx

function useCounter(initialValue) {

const [count, setCount] = useState(initialValue);

function increment() {

setCount(count + 1);

}

return {

count: count,

increment: increment

};

}

“`
- Custom hooks must start with "use"
- Nothing, it's correct
- It should return an array instead of an object
- It's missing a dependency array
Correct

Incorrect
Question 26 of 30

26. Question
Which of the following statement about the given component is correct?

“`jsx

function Component() {

const [state, setState] = useState({count: 0});

return (

<div>

<p>Count: {state.count}</p>

<button onClick={() => setState(prev => ({count: prev.count + 1}))}>

Increment

</button>

<button onClick={() => setState({})}>Reset</button>

</div>

);

}

“`
- Clicking Reset will set count to 0
- Clicking Reset will cause an error
- Clicking Reset will make count undefined
- Clicking Reset will have no effect
Correct

Incorrect
Question 27 of 30

27. Question
What will happen when this component renders?

“`jsx

function Component({items}) {

const [filteredItems, setFilteredItems] = useState(

items.filter(item => item.active)

);

return (

<ul>

{filteredItems.map(item => (

<li key={item.id}>{item.name}</li>

))}

</ul>

);

}

“`
- It will filter items in real time
- It will render an empty list
- It will cause an infinite re-rendering loop
- It will only filter items on the first render
Correct

Incorrect
Question 28 of 30

28. Question
What will this code render?

“`jsx

function Parent() {

return (

<div>

<Child />

</div>

);

}

function Child() {

const [count, setCount] = useState(0);

if (count === 0) {

setCount(1);

}

return <div>{count}</div>;

}

“`
- 0
- 1
- It will render nothing
- It will cause an error
Correct

Incorrect
Question 29 of 30

29. Question
What does this component render?

“`jsx

function Example() {

const items = [‘a’, ‘b’, ‘c’];

const [selected, setSelected] = useState(new Set());

function toggle(item) {

const newSelected = new Set(selected);

if (newSelected.has(item)) {

newSelected.delete(item);

} else {

newSelected.add(item);

}

setSelected(newSelected);

}

return (

<div>

{items.map(item => (

<button

key={item}

style={{color: selected.has(item) ? ‘red’ : ‘black’}}

onClick={() => toggle(item)}

>

{item}

</button>

))}

</div>

);

}

“`
- Three buttons that can be toggled between red and black
- Three buttons that are all black and never change
- Three buttons that are all red and never change
- An error because Sets can't be used in state
Correct

Incorrect
Question 30 of 30

30. Question
What will happen when this component renders?

“`jsx

function Example() {

const [state, setState] = useState({count: 0});

useEffect(() => {

setState(prevState => ({

count: prevState.count + 1

}));

}, [state]);

return <div>Count: {state.count}</div>;

}

“`
- "Count: 0"
- "Count: 1"
- It will throw a runtime error due to too many re-renders
- "Count: Infinity"
Correct

Incorrect

Cookie	Duration	Description
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

React JS

Eligible Rewards

300 NyxCoins*

Assessment Summary

Information

Results

Results

Categories

1. Question

2. Question

3. Question

4. Question

5. Question

6. Question

7. Question

8. Question

9. Question

10. Question

11. Question

12. Question

13. Question

14. Question

15. Question

16. Question

17. Question

18. Question

19. Question

20. Question

21. Question

22. Question

23. Question

24. Question

25. Question

26. Question

27. Question

28. Question

29. Question

30. Question