## Why React hook and Functional component

#### Example:  ListViewComponent , TreeViewComponent , ImageViewerComponent

A ListViewComponent - should logic of​ pagination states and scroll handlings. ​​
What if all other ListView needed the same logic and scroll handlings.​ Usually we write as `RenderProps Component` or `Higher orderComponent` using class for re-usablity.​
​We can assume, our `listing  logics` are written in the name of class 'ListViewLogicClassComponent'. Everybody will re-use this to show their list view (without re-written the same list logics).​​

1. About RenderProps Component  - It usually take the function as input and return will be react element/component. 
   We do logics inside `ListViewLogicClassComponent`, then we will pass decided/needed properties to that input function , it will return the react element/component.
​​     ```<ListViewLogicClassComponent limit={50}  listApi={articlesList}  renderComponent={​(properties)=>{​​
​​
​                    //properties.listItems ​
​                    //properties.isNextAvailable()​
​                    //properties.isPreviousAvailable()​
​                    //properties.currentRage

                        retrurn <MyListView {...properties}>
​​
​       }}  />​```

        cons: 
            It will diffcult to manage multiple RenderProps logic. Think, I adding logic over another RenderProps logic  
            ```<ListFilterLogicClassComponent renderComponent={

                        return <ListViewLogicClassComponent renderComponent={


                        }/>
            } />```
            Nested and multiple logics re-usablity will be diffcult. 

​ 2. About Higher orderComponent - It usually, take the component as input and return will be react element/component.
    We do logics inside `ListViewLogicHOCComponent`, then we will bind decided/needed properties to that input component, it will return the react element/component.
​   
    ```let MyListViewWithLogic = ListViewLogicHOCComponent(MyListView);```


    cons: 
      1. There are static properties can be inside the input component, everytime we need copy (third party needed) and add our properties. 
      2. It will conflit Naming problem over input component. 
      3. It will diffcult to manage multiple HOC logic. Think, I adding logic over another HOC logic  
        ```LisFilterLogicHOCComponent(ListViewLogicHOCComponent(MyListView))```
        Nested and multiple logics re-usablity will be diffcult. 

  
3. What does functional component - It usually, take the properties and return will be react element/component.

      Here `createListViewLogic` is hook will return logic of list view

       ```ArticleListView(properties){

            let listLogicProperties = createListViewLogic(properties)

            return <MyListView {...listLogicProperties} />
       }```


       1. React is offering Hooks only for functional component
       2. Actually the hooks are helping to creating multiple logic sapretely and combine easily. 
       Nested and multiple logics re-usablity will be easier.  

        ```ArticleListView(properties){

            let listLogicProperties = createListViewLogic(properties);
            let listFilterProperties = createListFilterLogic(properties);

            return <MyListView {...listLogicProperties} />
       }``
   

