REACT NOTES

VIRTUAL DOM:
React builds a representation of the browser Document Object Model or DOM in memory
called the virtual DOM. As components are updated, React checks to see if the component’s
HTML code in the virtual DOM matches the browser DOM. If a change is required, the
browser DOM is updated. If nothing has changed, then no update is performed. this is called
the reconciliation process

Types of components:
1) Functional component :- functional components are reusable blocks of code that
act like a JavaScript function and you can pass data from one component to another using
props.

2) Class component :-

Component vs Module
Component: small pieces of functionality
Module: series of component

React Props:- Props allows you to pass data between components.

React Props are like function arguments in JavaScript and attributes in HTML.

Limitation:

 only data can be passed from parent component to child component

not from child to parent component.
 We cannot the change the value of prop value inside the child
component.

Props.children:-

Embedded expression :- Allow javascript values to be

inserted into HTML of react element.

Data in react

 Props
 State
 Keys in react: keys are the identifiers to identify which items are changed,
added and removed and instruct treatment of elements when updates
happen.

React Context API:- allows you to easily access data at

different level of the component tree, without passing prop at
every levels.
Steps:
 Create context
 Provider
 Consumer ( you can use the value of a provider through a function only)

useContext():- it makes context a little easier to consume.

React.memo and useMemo

Forms Controlled component and Uncontrolled components

Rules of hooks in React

 We should only call Hooks from a React component function.
 We should only call Hooks at the top Level.
 We are allowed to call multiple or effect hooks
 Make multiple hook calls in the same sequence.

Component composition
 Component Containment
 Component specialization

React.CloneElement:- React API for manipulating children dynamically in

jsx. With React.CloneElement we can add to children properties, modify to
children properties, Extend the functionality of children.

React.Children
Higher Order Component