React JS - Scenario-based questions

In the last quarter of 2022, I appeared for multiple interviews and made a habit of noting down all questions and brushing up the ones which I couldn't answer.
**Note: most are from React but 2-3 are general web development concepts.*

I decided to make a list of the scenario based/practical questions which I came across from my personal experience.

1. Why does Cross-Origin Resource Sharing (CORS) error occur? How to handle it from frontend as well as backend?

2. How to globally attach a JWT token to every request header? Without modifying each and every API function?

3. When trying to close browser, how can we show a custom popup "Are you sure? You have unsaved changes."?

4. How can we prevent a function from being called too many times in a row? Eg. search input change firing API call

5. If same state value is updated, does component re-render? Does child components re-render? Assuming there's no memo code.

6. In Redux, can we have multiple states or a single state?

7. Does React.memo do deep **or **shallow **comparison? How to add **custom comparison function?

8. How do you optimize a webpage that's using multiple images? Eg. list shows 250 countries with flag images

9. How to manage env based versions of React project? Eg. different API endpoints, builds for Dev, QA, Prod.

10. How to run concurrent API calls? Eg. on button click, 5 independent API calls are made. When all 5 API responses are received, only then show success message to user.

11. Component *has a loop which renders multiple * components. Clicking each child component makes a function call to parent component's display() function. How can we optimize performance?

12. Using useState, how can we initialize value from a function using expensive calculation?
    Eg.
    

function expensive() {
 // expensive calculation logic
 return result;
} 
const [myState, setMyState] = useState( // use expensive function's return value here )