React Interview Questions & Answers
React js is a declarative and open source JavaScript library developed by facebook in 2011. It follows the component based approach for building reusable UI components, especially for single page application, that aims to simplify the intricate process of building interactive user interfaces.
Features of React are
- JSX
- Virtual DOM
- State and Props
- One-Way Data Binding
- Simplicity
- Performance
The Advantages of React are :
- Virtual DOM and Performance Optimization
- Reusable Components and Code Reusability
- Easy to learn and use
- Creating dynamic web application becomes easier
- Strong Community Support
- SEO-Friendly Applications
- Scalability and Flexibility
Vartual DOM is an in-memory representation of a Real-DOM . It is a light-weight javascript Object and which is a copy of Real-DOM.
JSX Stands for Javascript XML. It is a React extension which allows you to writing javascript code that looks similar to HTML. It makes html file easy to understand. The Jsx file makes the react application robust and boosts its Performance.
The Rules of JSX
- Return a single root element. To return multiple elements from a component, wrap them with a single parent tag
- Fragment – lets us group elements without adding extra nodes
- CamelCase Property naming convension
- className insted of class
- Close every element
- Formatting – Opening tag in the same line as return or ()
- State is an updatable structure which holds the data and information about the component. It may be changed over the lifetime of the component in response to user action or system event.
- state is mutable
- Props stands for Properties in React and is used for passing data from one component to other and they are read-only inputs to the components.
- Props are immutable
We can update the state of a component in React by calling to setState() method
useEffect is a hook in React that allows you to perform side effects in function components such as fetching data, and updating DOM, subscriptions, timers etc. This hook runs on every render but there is also a way of using a dependency array using which we can control the effect of rendering.
Using useContext hook to manage global data in our react application without having to pass props down manually at every level.
The useMemo hook in react that allows you to memoize a value. It takes two arguments the first is a function that returns the value you want to memoize and the second is an array of dependencies. The hook will return the memorized value that will only change if one of the values in the dependency array changes.
By memorizing a value you can avoid unnecessary calculations and improve our react application performance.
- The use Callback hook is a hook in React that allows you to memorize a function. It takes two arguments the first is the function you want to memorize and second is an array of dependencies
- By memorizing the function you can avoid unnecessary re-renders and improve the performance of your React application.