# React Components

## LIST OF CONTENT:

1. COMPONENTS BASICS
2. SMART COMPONENTS VS DUMB COMPONENTS
3. LAYOUT COMPONENTS
4. ERROR BOUNDARIES
5. HIGHER ORDER COMPONENTS
6. FRAGMENT
7. STRICT MODE

=> Need to review concepts in this link
https://hackmd.io/0irrd2r1TRGQQ3gAN4L93A

## 1. COMPONENTS BASICS:

**a. Different definitions of components:**

- Components are reuable chunks of JavaScript that return (via JSX) virtual HTML elements

- Components is a combination of HTML, CSS and JavaScript codes that is maded up different sections of a web application

- Component are functions that accept arbitrary inputs and return REact elements describing what should appear on the screen

**b. Different types of components:**

- Basic types:
+, Functional Components
+, Class Based Components
+, Parent Components
+, Child Components
+, Pure Components

- Advanced Types:
+, Smart Components (containers)
+, Dumb Components (presentational)
+, Layout Components
+, Error Boundaries

## 2. SMART COMPONENTS VS DUMB COMPONENTS:

- Smart components are containers components that usually doesn't define styles but perform data fetching and provide data

- Dumb component are presentational and re-usable components that shouldn't produce side effects

| Smart Component (containers) | Dumb Component (presentational) |
| -------- | -------- |
| Knows how everything works | Knows how to look |
| Just a container for other components | Know how to display received data |
| Provide application data | Receives and operates only with props |
| Perform data fetching | Operate with styles |
| No idea about styles | Work via pure functions |
| Might have sid effects | Shouldn't produce side effects |
| Might be implemented with impure functions | |

- Benefit of seperating Smart Components and Dumb components:

## 3. LAYOUT COMPONENTS:

- Layout components define the layout of the application. It usually takes in children and props and render them to the DOM

- Layout components are re-usable in order to define layout of the application

Article about Layout component:
https://dev.to/olenadrugalya/layout-component-and-why-we-use-it-in-react-d8b

## 4. ERROR BOUNDARIES

Error boundaries are **React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI** instead of the component tree that crashed.

If there is no error boundary, the app would just crash and user see an blank page without being notified that there is something wrong with the app

Error Boundary can only be created with class based components because it needs to utilize some life cycle methods

=> More about Error boundaries:
https://reactjs.org/docs/error-boundaries.html

https://viblo.asia/p/xu-ly-loi-trong-reactjs-voi-error-boundary-3P0lPDD8lox

Tutorial:
https://www.youtube.com/watch?v=w4sxsz7AO70&ab_channel=Techbase

=> Find this folder locally to see error boundary demonstration:

EPAM Learning/ReactJS/component/error-boundary

## 5. HIGHER ORDER COMPONENTS:

Review this link to understand what is higher order function:
https://hackmd.io/0irrd2r1TRGQQ3gAN4L93A

**a. Problem to solve: Why do we use HOC ?**

- When developing applications, there are a lot of components that have the same operation. For example: click on a button and a counter will be increased, hover over a section and a counter will be increased, etc.

- We can find ourself repeating the same operations when developing these components. Thus, we can have a solution where we can just reuse the same logic & operations for different components accross the app

- More Explanation:
https://www.youtube.com/watch?v=B6aNv8nkUSw&t=2s&ab_channel=Codevolution

=> Solution is HOC

**b. What is HOC and how to use it ?**

- Higher Order Component is a function that receive a component as a parameter and return an enhanced component

- Higher Order Component is used to inject data or additional functions as props to a WrappedComponent which produce an enhanced component

- How to use it ?
https://www.youtube.com/watch?v=B6aNv8nkUSw&t=2s&ab_channel=Codevolution

**c. Other Information**

- Naming convention:
+, Higher Order Component start with the word: "With"
+, For example: WithLoading, WithCounter, etc.

- WrappedComponent
+, Is a component that is passed as an argument into HOC for enhancement

- UPDATE:
+, From React 16.8, hooks are introduced. Developers now can make custom hooks that replace most use cases of the higher order components
+, It is recommended to use hooks instead of higher order component
+, More Details:

https://medium.com/@jrwebdev/react-higher-order-component-patterns-in-typescript-42278f7590fb

## 6. FRAGMENT:

**a. Problem:**

- In React, if there are multiple child components, child components need to be wrapped in a single div component

- This will produce an additional node in the DOM which make the DOM less efficient

- If the same issue happened accross different components in the app. We will have a significantly larger DOM than we needed to

=> See this video to understand the problem and Fragment as a solution:
https://www.youtube.com/watch?v=bHdh1T0-US4&ab_channel=Codevolution

**b. Problem with a large DOM:**


**c. Demonstration:**

- We can import {Fragment} from "react" to use Fragment. Or simply wrap everything with <></>

- Wrapping component with <div>



- Wrapping component with Fragment



=> Same result, less nodes > Better performance

## 7. STRICT MODE:



## 8. Extra Knowledge:

- Learnt this when doing homework:

Form elements don't inherit font settings, you have to set these properties manually. (see link down below)

https://stackoverflow.com/questions/26140050/why-is-font-family-not-inherited-in-button-tags-automatically