Important interview Q/A on React JS for beginners

What is React?

What is JSX?

class App extends React.Component {
render() {
return(
<div>
<h1>{'Welcome to React world!'}</h1>
</div>
)
}
}

When to use a Class Component over a Function Component?

What are Pure Components?

Why should we not update the state directly?

//Wrong
this.state.message = 'Hello world'
//Correct
this.setState({ message: 'Hello World' })

What is the difference between HTML and React event handling?

  1. In HTML, the event name should be in lowercase:
<button onclick='activateLasers()'>
<button onClick={activateLasers}>
<a href='#' onclick='console.log("The link was clicked."); return false;' />
function handleClick(event) {
event.preventDefault()
console.log('The link was clicked.')
}

What is the use of refs?

How to create refs?

  1. 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.
class MyComponent extends React.Component {
constructor(props) {
super(props)
this.myRef = React.createRef()
}
render() {
return <div ref={this.myRef} />
}
}
class SearchBar extends Component {
constructor(props) {
super(props);
this.txtSearch = null;
this.state = { term: '' };
this.setInputSearchRef = e => {
this.txtSearch = e;
}
}
onInputChange(event) {
this.setState({ term: this.txtSearch.value });
}
render() {
return (
<input
value={this.state.term}
onChange={this.onInputChange.bind(this)}
ref={this.setInputSearchRef} />
);
}
}

What is Virtual DOM?

How Virtual DOM works?

  1. Whenever any underlying data changes, the entire UI is re-rendered in Virtual DOM representation.

What is the difference between Shadow DOM and Virtual DOM?

What is React Fiber?

What is the main goal of React Fiber?

What are controlled components?

handleChange(event) {
this.setState({value: event.target.value.toUpperCase()})
}

Do Hooks replace render props and higher order components?

How to ensure hooks followed the rules in our project?

npm install eslint-plugin-react-hooks@next
// our ESLint configuration
{
"plugins": [
// ...
"react-hooks"
],
"rules": {
// ...
"react-hooks/rules-of-hooks": "error"
}
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store