24
React Interview Questions (Entry - Junior Level)
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.
React is an open-source JavaScript frontend library for creating user interfaces. It uses component based approach to create complicated, interactive web and mobile user interfaces.
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.
JSX is a syntax extension to JavaScript that describes what the UI should look with the full power of JavaScript. JSX provides syntactic sugar for the React.createElement() function.
JSX gets compiled to React.createElement() calls which return plain JavaScript objects. It gives us expressiveness of JavaScript along with HTML like template syntax.
React elements are the building blocks of React applications.
It describes what you want to see on the screen. React elements are immutable.
React components are small, reusable pieces of code that return a React element to be rendered to the page. The simplest version of React component is a plain JavaScript function that returns a React element. Components can also be ES6 classes.
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 onChange or onClick.
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.
Virtual DOM or VDOM is lightweight JavaScript representation of the DOM. The representation of User Interface is kept in memory and synced with the "real" DOM. Update on virtual DOM is cheaper and faster than updating the actual DOM.
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:
24