AdvanceduseContext hook useRef hook useReducer hook Memo useCallback hook Custom Hooks React and Redux
MiscellaneousReact Third Party Components Html templates in React React Interview QnA
- JS framework for developing UI components
- Components can be written using classes or functions
- Uses virtual DOM concept and reconciliation resulting in better performance
- React uses JSX
- React can be used to create single page applications
Virtual DOMMain reason why React is so popular and fast is - Virtual DOM and reconciliation process. React maintains virtual copy of DOM. Here is how virtual dom works.
- Before any virtual DOM changes happen, React takes snapshot of current virtual DOM.
- After changes in virtual DOM, React compares current vdom with snapshot vdom. Important thing to note here is that changes are not done directly to real DOM as they are expensive. After comparison using diffing algorithm, react knows how to synch changes with real dom.
- Then react will only render that part of UI which has changed. This process is called as reconciliation.
What is diffing algorithmDiffing algorithm (it is a heuristic algorithm of complexity O(n) is used to find out what has changed between current and previous vdom.
- If root elements change from one type to another, React will tear down old tree and build new.
- If root types are same and attributes have changed, react will only update attributes. Same process will apply to all children
- When comparing children, react uses key prop to check if element is same or different.
What are rendering types
Web development and Automation testing