React core concepts

JSX

JSX is a JavaScript syntax extension that provides a way to structure component rendering using syntax familiar to many developers. It is similar in appearance to HTML.

*Prop Types *

Prop Types is Reacts internal mechanism for adding type checking to components. React components use a special property named prop Types to set up type checking. When props are passed to a React component, they are checked against the type definitions configured in the prop Types property.

*state props *

In a React component, props are variables passed to it by its parent component. State on the other hand is still a variable but directly initialized and managed by the component. The state can be initialized by props. and any other method in this class can reference the props using this

Component Lifecycle

React components have a lifecycle. It has three phases. Mounting (componentDidMount -> Updating (componentDidUpdate)-> Unmounting (componentWillUnmount)

How React Hook works, send state via props, props vs state

useState, useEffect is called Hook in React.
If the state is used in any component is called Stateful Component and doesn’t contain the state is called Stateless / Presentational component.
Difference between state and props - Interview Important - Main difference is: props are Read-only, but the state can be changed.

Custom hooks

Custom Hooks lets you extract component logic into reusable functions.

Context API

Normally when we pass data from one component to another component it is called props dealing. But when we have to send data down to 4 to 5 components, we can use context API. If we use the context API, we don't have to deal with props, we can import and use data wherever we need it.

Virtual DOM and diffing- algorithm

When we made a React app, React creates a virtual DOM internally by combining all the components and sending it to the browser. The browser renders it and displays it. If the user does something in UI and needs to update the Browser DOM, React compares only the changed part with its old virtual DOM and updates it significantly faster-using diff algorithm and sends the browser only the changed part for the update. The browser immediately updates it in the browser DOM and displays it.