Scribd
Upload
42 views2 pages

React Notes

The virtual DOM allows React to check for changes between the component's HTML representation in memory and the actual DOM. If changes are detected, the real DOM is updated. Otherwise, no update occurs. There are two types of components: functional components are reusable blocks of code that accept data via props, while class components require more code. Components represent small pieces of functionality, while modules group components. Props allow passing data between components but cannot be changed by child components. Context API provides a way to share data across component trees without passing props through every level.

Uploaded by

ritik sarkar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
42 views2 pages

React Notes

The virtual DOM allows React to check for changes between the component's HTML representation in memory and the actual DOM. If changes are detected, the real DOM is updated. Otherwise, no update occurs. There are two types of components: functional components are reusable blocks of code that accept data via props, while class components require more code. Components represent small pieces of functionality, while modules group components. Props allow passing data between components but cannot be changed by child components. Context API provides a way to share data across component trees without passing props through every level.

Uploaded by

ritik sarkar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

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

You might also like