Here are the most common React interview questions that will be asked on your next interview. Good luck if you are about to interview and I hope this material will help you.
Developing single-page application with React is effortless especially using the integrated toolchain called Create React App.
First is the increased performance with Virtual DOM. React is insanely blazing fast.
Second, React uses JSX that makes code painless to read and write.
Third, React works on both the client and server side.
Fourth, it is simple to integrate this library with other frameworks since it is only a view library.
Last, it is easy to write unit tests.
React elements are the building blocks of React applications.
It describes what you want to see on the screen. React elements are immutable.
You can say that a component is a factory for creating multiple elements.
Fragments let you group a list of children without adding extra nodes to the DOM because fragments are not rendered to the DOM.
This is also very useful for CSS Flexbox and Grid as they have special parent to child relationship as adding an extra tag in the between will break the layout.
Props or properties are arguments passed into React components. It contains data coming down from a parent component to a child component.
Keys help react identify which elements were added, changed or updated, and removed. It should be given to array elements to provide a unique identity for each element.
React would be able to reorder elements without needing to re-evaluate as much.
State holds some information that may change over the lifetime of the component. It is private and fully controlled by the component until the owner component decides to pass it.
Updating the state directly, like below will not cause the component to re-render.
Instead, use setState() method. This method will schedule an update to a component's state object. When state changes, the component responds by re-rendering.
Lifecycle methods are custom functionality that gets executed during the different phases of a component.
These are methods are available when the component gets created or inserted into the DOM, when the component updates, and when the component gets unmounted or removed from the DOM.
A Controlled Component is one that takes a value through props and notify changes through callbacks like
Form data is handled by React component.
Uncontrolled Component is one that stores its own state internally, and queries the DOM using a ref or reference to find the current value when it is needed.
Form data is handled by the DOM.
In most cases, Controlled components are recommended to be used when implement forms.
The ref is used to return a reference to the element. They can be useful when you need direct access to the DOM element or an instance of a component.
The type of a component is determined by the way the tags are named. Both capitalized and dot notations are treated as React component while lowercase are treated as DOM elements.
When React finds the differences between the previous virtual DOM and the current virtual DOM, it only makes the necessary changes to the actual DOM.
Feel free to bookmark 🔖 even if you don't need this for now. You may need to refresh/review down the road when it is time for you to look for a new role.
If you want to support me - Buy Me A Coffee
Video 🎥 Format if you don't feel like reading: