Q. How JSX prevents Injection Attacks?
React DOM escapes any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything thats not explicitly written in your application. Everything is converted to a string before being rendered.
For example, you can embed user input as below,
Q. What are the common folder structures for React?
React doesnt have opinions on how you put files into folders. That said there are a few common approaches popular in the ecosystem you may want to consider.
1. Grouping by features or routes:
One common way to structure projects is to locate CSS, JS, and tests together inside folders grouped by feature or route.
2. Grouping by file type:
Another popular way to structure projects is to group similar files together, for example:
Q. What is the purpose of registerServiceWorker in React?
React creates a service worker for you without any configuration by default. The service worker is a web API that helps you cache your assets and other files so that when the user is offline or on slow network, user can still see results on the screen.
Example: Enable service worker in react
Q. How to build a progressive web app with react?
JSX ( JavaScript Expression ) allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() or appendChild() methods. JSX converts HTML tags into react elements. React uses JSX for templating instead of regular JavaScript. It is not necessary to use it, however, following are some pros that come with it.
When JSX compiled, they actually become regular JavaScript objects. For instance, the code below:
Example:
Q. What is useReducer() in React?
It accepts a reducer function with the application initial state, returns the current application state, then dispatches a function.
Although useState() is a Basic Hook and useReducer() is an Additional Hook, useState() is actually implemented with useReducer(). This means useReducer() is primitive and we can use useReducer() for everything can do with useState(). Reducer is so powerful that it can apply for various use cases.
Example:
Here, we first define an initialState and a reducer. When a user clicks a button, it will dispatch an action which updates the count and the updated count will be displayed. We could define as many actions as possible in the reducer, but the limitation of this pattern is that actions are finite.
Q. What is Event Pooling in React?
The SyntheticEvent is pooled. This means that the SyntheticEvent object will be reused and all properties will be nullified after the event callback has been invoked. This is for performance reasons. As such, you cannot access the event in an asynchronous way.
Example:
If we want to access the event properties in an asynchronous way, we should call event.persist() on the event, which will remove the synthetic event from the pool and allow references to the event to be retained by user code.
Q. Why do I need Keys in React Lists?
Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity:
Example:
React recommends that you do not use indexes as keys, if the order of items may change. It could impact performance negatively and could lead to some unstable component behaviour.