React Interview Questions and Answers – Part 3
Frequently asked React Interview Questions and Answers for freshers as well as experienced developers.
React Interview Questions
- React Interview Questions and Answers – Part 1
- React Interview Questions and Answers – Part 2
- React Interview Questions and Answers – Part 3 (You are here…)
- React Interview Questions and Answers – Part 4
List of React Interview Questions and Answers
- What is Refs in React?
- How to create Refs in React?
- What are forward refs in React?
- What is virtual DOM?
- How virtual DOM is working in React?
- Difference between Controlled and Uncontrolled Components in React
- What are Higher Order Components (HOC) in React?
- What can you do with HOC?
- What is Lifting State Up in React?
- How to write comments in React?
1. What is Refs in React?
Refs is an attribute of the DOM elements. It’s used to return a reference of the element. It should be avoided in most cases, however, it can be useful when you need direct access to the DOM element or an instance of a component.
Refs are generally used for the following purposes:
- Managing focus, text selection, or media playback.
- Triggering imperative animations.
- Integrating with third-party DOM libraries.
2. How to create Refs in React?
You can create Refs using three different methods.
Using React.createRef():
1 2 3 4 5 6 7 8 9 | class MyComponent extends React.Component { constructor(props) { super(props); this.myRef = React.createRef(); } render() { return <div ref={this.myRef} />; } } |
After rendering an element you can access ref via the current attribute.
1 | const node = this.myRef.current; |
Using callback ref:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | class App extends Component { constructor(props) { super(props); this.txtSearch = null; this.state = { text: '' }; } onInputChange() { this.setState({ text: this.txtSearch.value }); } render() { return ( <input value={this.state.text} onChange={this.onInputChange.bind(this)} ref={e => this.txtSearch = e} /> ); } } |
Using useRef() hook:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | function TextInputWithFocusButton() { const inputEl = useRef(null); const onButtonClick = () => { // `current` points to the mounted text input element inputEl.current.focus(); }; return ( <> <input ref={inputEl} type="text" /> <button onClick={onButtonClick}>Focus the input</button> </> ); } |
3. What are forward refs in React?
The Ref forwarding is a feature that lets some components take a ref they receive, and pass it further down to a child.
1 2 3 4 5 6 7 8 9 | const MyButton = React.forwardRef((props, ref) => ( <button ref={ref} className="BtnClass"> {props.children} </button> )); // You can now get a ref directly to the DOM button: const ref = React.createRef(); <MyButton ref={ref}>Click me!</MyButton>; |
4. What is virtual DOM?
The virtual DOM is an in-memory representation of the real DOM elements generated by React components before any changes are made to the page. 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.
5. How virtual DOM is working in React?
The Virtual DOM works in three simple steps.
- Whenever any underlying data changes, the entire UI is re-rendered in Virtual DOM representation.
- Then the difference between the previous DOM representation and the new one is calculated.
- Once the calculations are done, the real DOM will be updated with only the things that have actually changed.
6. Difference between Controlled and Uncontrolled Components in React
Maintain State:
Controlled Components – Do not maintain their own state.
Uncontrolled Components – Maintain their own state.
Data controll:
Controlled Components – Data is controlled by parent component.
Uncontrolled Components – Data is controlled by DOM.
Current value:
Controlled Components – Takes in current values through props and notifies changes via callbacks.
Uncontrolled Components – Refs are used to get their current value.
7. What are Higher Order Components (HOC) in React?
- They are Custom components which wraps another component.
- They accept dynamically provided child components.
- They do not modify the input component.
- They do not copy any behavior from the input component.
- They are Pure functions.
8. What can you do with HOC?
- Can reuse the code, logic and bootstrap abstraction.
- Can render high jacking.
- State abstraction and manipulation.
- Can manipulate the props.
9. What is Lifting State Up in React?
When several components need to share the same changing data then it is recommended to lift the shared state up to their closest common ancestor. That means if two child components share the same data from its parent, then move the state to parent instead of maintaining local state in both of the child components.
10. How to write comments in React?
The comments in React/JSX are wrapped in curly braces.
Single-line comments
1 2 3 4 | <div> {/* This is single-line comments */} {`Welcome to Clue Mediator!`} </div> |
Multi-line comments
1 2 3 4 5 | <div> {/* It also works for multi-line comments. */} {`Welcome to Clue Mediator!`} </div> |
That’s it for today.
Thank you for reading. Happy Coding..!! 🙂
