ReactJS Interview Questions and Answers
Question - 11 : - How to pass a parameter to an event handler or callback?
Answer - 11 : - You can use an arrow function to wrap around an event handler and pass parameters:
Question - 12 : - What are synthetic events in React?
Answer - 12 : - SyntheticEvent is a cross-browser wrapper around the browser's native event. It's API is same as the browser's native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers.
Question - 13 : - What is "key" prop and what is the benefit of using it in arrays of elements?
Answer - 13 : - A key is a special string attribute you should include when creating arrays of elements. Key prop helps React identify which items have changed, are added, or are removed.
Most often we use ID from our data as key:
const todoItems = todos.map((todo) =>
{todo.text}
)
When you don't have stable IDs for rendered items, you may use the item index as a key as a last resort:
const todoItems = todos.map((todo, index) =>
{todo.text}
)
Note:
i. Using indexes for keys is not recommended if the order of items may change. This can negatively impact performance and may cause issues with component state.
ii. If you extract list item as separate component then apply keys on list component instead of li tag.
iii. There will be a warning message in the console if the key prop is not present on list items.
Question - 14 : - What is the use of refs?
Answer - 14 : - The ref is used to return a reference to the element. They should be avoided in most cases, however, they can be useful when you need a direct access to the DOM element or an instance of a component.
Question - 15 : - How to create refs?
Answer - 15 : - There are two approaches
i. This is a recently added approach. Refs are created using React.createRef() method and attached to React elements via the ref attribute. In order to use refs throughout the component, just assign the ref to the instance property within constructor.
ii. class MyComponent extends React.Component {
iii. constructor(props) {
iv. super(props)
v. this.myRef = React.createRef()
vi. }
vii. render() {
viii. return
ix. }
}
x. You can also use ref callbacks approach regardless of React version. For example, the search bar component's input element accessed as follows,
xi. class SearchBar extends Component {
xii. constructor(props) {
xiii. super(props);
xiv. this.txtSearch = null;
xv. this.state = { term: '' };
xvi. this.setInputSearchRef = e => {
xvii. this.txtSearch = e;
xviii. }
xix. }
xx. onInputChange(event) {
xxi. this.setState({ term: this.txtSearch.value });
xxii. }
xxiii. render() {
xxiv. return (
xxv.
xxix. );
xxx. }
}
You can also use refs in function components using closures. Note: You can also use inline ref callbacks even though it is not a recommended approach
Question - 16 : - What is Virtual DOM?
Answer - 16 : - The Virtual DOM (VDOM) is an in-memory representation of Real DOM. The representation of a UI is kept in memory and synced with the "real" DOM. It's a step that happens between the render function being called and the displaying of elements on the screen. This entire process is called reconciliation.
Question - 17 : - What is the difference between Shadow DOM and Virtual DOM?
Answer - 17 : - The Shadow DOM is a browser technology designed primarily for scoping variables and CSS in web components. The Virtual DOM is a concept implemented by libraries in JavaScript on top of browser APIs.
Question - 18 : - What is React Fiber?
Answer - 18 : - Fiber is the new reconciliation engine or reimplementation of core algorithm in React v16. The goal of React Fiber is to increase its suitability for areas like animation, layout, gestures, ability to pause, abort, or reuse work and assign priority to different types of updates; and new concurrency primitives.
Question - 19 : - What is the main goal of React Fiber?
Answer - 19 : - The goal of React Fiber is to increase its suitability for areas like animation, layout, and gestures. Its headline feature is incremental rendering: the ability to split rendering work into chunks and spread it out over multiple frames.
Question - 20 : - What are controlled components?
Answer - 20 : - A component that controls the input elements within the forms on subsequent user input is called Controlled Component, i.e, every state mutation will have an associated handler function.
For example, to write all the names in uppercase letters, we use handleChange as below,
handleChange(event) {
this.setState({value: event.target.value.toUpperCase()})
}