React JS - Interview Questions...
What is React ?
React is a front-end and open source javascript library which is useful in developing single-page user interfaces. Under the hood, react uses Virtual Dom.
- It follows the component-based approach. Components make your code more predictable and easier to debug
- It lets you build complex UIs from small and re-usable pieces of code called Components.
- React will efficiently update and render just the right components when your data changes.
- Code is written in JSX
What is the Virtual DOM ??
React Keeps a light Weight representaion of the real DOM in the memory, and that is known as the virtual DOM. When the state of an object changes, the virtual DOM changes only that object in the real DOM, rather than updating all the objects.
What are the Components in ReactJS ?
Components are independent and reusable bits of code. They serve that same purpose as, JavaScript functions, but work in isolation and return HTML.
- Functional Components :
These are also called stateless, dumb and presentational components.
Because, they only care about UI representation, and don`t have any state.
Data to these components usually passed via props
-Class Components :
These are also called stateful or smart components. Because can hold and manage
their own state. They can have lifecycle methods. Usually the business logics / calculations are written in these components.
Note:
Before the introduction of Hooks in React JS, Functional Components were called stateless components and were behind class components on a feature basis. After the introduction of Hooks, functional components are equivalent to class components.
When to use a class component over a Function Component??
If the component need state or lifecycle methods then use class component otherwise use function component.
However, from React v16.8 with the addition of Hooks, you could use state, lifecycle methods and other features that were only available in class componet right in your function component. so, it is always recommended to use Function components, unless you need a React functionality whose function component equlvalent is not present yet, like error boundaries.
How to pass data from one component to another component ?
Parent to Child : With the help of props, we can send data from a parent to a child component.
Child to Parent :
- Create a callback in the parent component which takes in the data needed.
- pass this callback as a prop to the child component.
- Send data from the child component using the callback.
What are Pure Components ?
React PureComponent is exactly the same as React.Component except that it handles the shouldComponentUpdate() method for you
What is uncontrolled Component ?
Uncontrolled component is the one that stores its own state internally. ref is used to query the DOM to find its current value when you need it. This a bit more like traditional HTML.You could als call this a "Smart Component"
What is Controlled Component ?
Controlled component is one that takes its current value through props and notifies changes through callbacks like onChange. and, Callback is controlled by a parent component which manages its own state and passes the new values as props to the controlled component.
- You could also call this is a "dumb component".
Component is a class or function component, that describes the presentational part of your application . Container is an informal term for a component that is connected to a Redux store.Containers subscribe to Redux state updates and dispatch actions, and they usually don`t render DOM element , they delegate rendering to presentational child components.
What is a State in ReactJS ?
State is the brains of React Application.The state is abuild-in React object that is used to contain data or information about the component.The state in a component can change over time, and whenever it chagnes, the component gets re-rendered. The change in state can happen as a response to user events (Click,Type,Scroll etc..) or System-generated events.It is responsible to determine the behavior of the component and how it will render.
