This content originally appeared on DEV Community and was authored by Hiep Le
This is the second part in my series (Crack the React Interviews Using Mindmap). My series will give you the answers about different React interview questions by using mindmap. Mindmap is a technique that help you remember things easier. It is used by many memory championships, professors, valedictorians and so on.
By applying mindmap, my series will give you the key points for each answer. Hence, you can understand the answer and explain in your React interviews.
I'm Hiep. I work as a full-time software engineer. Most of my open-source projects are focused on one thing - to help people learn ?.
I created a git repository that help you crack the React interviews by using mindmap.
Github link:
https://github.com/hieptl/react-interview-questions-using-mindmap
If the repository is useful, please help me share the post and give me a Github's star. It will make me feel motivation to work even harder. I will try to make many open sources and share to the community ❤️.
I also created some series that help you improve your practical skills:
1. Learn React By Buiding Netflix
https://dev.to/hieptl/learn-react-by-building-netflix-1127
2. Master Design Patterns by Building Real Projects - Javascript.
https://dev.to/hieptl/series/13039
3. Some Mistakes When Using "This" Keyword in Javascript and Solutions
https://dev.to/hieptl/some-mistakes-when-using-this-keyword-in-javascript-and-solutions-4j77
Table of Contents
Table of Images
11. Why Should We not Update the State Directly ?
Figure 11. Crack the React Interview by Using Mindmap - Question 11.
//Wrong
this.state.userName = 'Hiep Le'
//Correct
this.setState({ userName: 'Hiep Le' });
//Correct
const [userName, setUserName] = useState('');
...
setUserName('Hiep Le');
...
12. What is the Purposes of Callback Function as an Argument of setState() ?
Figure 12. Crack the React Interview by Using Mindmap - Question 12.
setState({ userName: 'Hiep Le' }, () => console.log('The userName has been updated and the component was re-rendered'))
13. What are the Differences between HTML and React Event Handling ?
Figure 13. Crack the React Interview by Using Mindmap - Question 13.
HTML - Event name:
<button onclick='showUserName()'>
React - Event Name:
<button onClick={showUserName}>
HTML - preventDefault
<a href='#' onclick='console.log("The link was clicked."); return false;' />
React - preventDefault
const handleClick = event => {
event.preventDefault()
console.log('The link was clicked.')
}
HTML - Invoking Function - Should append ():
<button onclick='showUserName()'>
React - Invoking Function - Should not append ():
<button onClick={showUserName}>
14. How to Create React Refs ?
Figure 14. Crack the React Interview by Using Mindmap - Question 14.
React.createRef();
import React from 'react';
class UserProfile extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return <div ref={this.myRef}></div>
}
}
useRef();
import {useRef} from 'react';
function UserProfile() {
const myRef = useRef();
return (
<div ref={myRef}></div>
);
}
Ref callback
class MyInput extends Component {
constructor(props) {
super(props);
this.input = null;
this.inputRef = e => {
this.input = e;
}
}
render() {
return (
<input ref={this.inputRef} />
);
}
}
15. How to Bind Methods in JSX Callbacks ?
Figure 15. Crack the React Interview by Using Mindmap - Question 15.
Binding in constructor
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
...
}
...
}
Public class field syntax
function MyComponent() {
const handleClick = () => {
...
};
}
Arrow functions in callbacks
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
}
handleClick() {
...
}
render() {
return (
<div>
<button onClick={() => handleClick()}>Click</button>
</div>
);
}
}
16. How to Pass Parameters to an Event Handlers or Callbacks ?
Figure 16. Crack the React Interview by Using Mindmap - Question 6.
Wrap a event handler in an arrow function:
<button onClick={() => this.handleClick(id)}>Click</button>
Use .bind:
<button onClick={() => this.handleClick.bind(this, id)}>Click</button>
Pass arguments to a function defined as an arrow function:
const handleClick = (id) => {
...
}
...
<button onClick={handleClick(id)}>Click</button>
...
17. What are Synthetic Events in React ?
Figure 17. Crack the React Interview by Using Mindmap - Question 17.
18. What are Inline Conditional Expressions ?
Figure 18. Crack the React Interview by Using Mindmap - Question 18.
import React from 'react';
class Greeting extends React.Component {
constructor(props) {
super(props);
}
render() {
<div>
{this.props.userName && this.props.isAccountExisted ? <p>Hello, {this.props.userName}</p> : <p>Hello, stranger</p>}
</div>
}
}
19. What is Key Prop ?
Figure 19. Crack the React Interview by Using Mindmap - Question 19.
import React from 'react';
function Movies({movies}) {
return (
<div>
{
movies.map(movie => <span key={movie.id}>{movie.name}</span>)
}
</div>
)
}
20. What is the Use of Refs ?
Figure 20. Crack the React Interview by Using Mindmap - Question 20.
This is the end of the second part. I am writing the next parts, you just need to follow my series and we will crack the React interviews together ? ❤️
Thanks and Best Regards,
Hiep.
This content originally appeared on DEV Community and was authored by Hiep Le
Hiep Le | Sciencx (2021-06-05T16:04:17+00:00) Crack the React Interviews By Using Mindmap – Part 2. Retrieved from https://www.scien.cx/2021/06/05/crack-the-react-interviews-by-using-mindmap-part-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.