[VirtualList and Scroller] Convert from UI React component to functional component

[jeonghee27]

Checklist

• [x] I have read and understand the contribution guide

• [ ] A CHANGELOG entry is included

• [ ] At least one test case is included for this feature or bug fix

• [ ] Documentation was added or is not needed

• [ ] This is an API breaking change

Issue Resolved / Feature Added

We want to migrate HoC and render props to hooks for all VirtualList and Scroller. As the first step, I converted 4 ui scroller components defined by class to functional component.

Resolution

4 ui scroller components have been converted to functional component.

• Target component UI/VirtualListBase UI/Scrollable UI/ScollableNative UI/Scroller

1. Change class NameOfComponent extends Component to const NameOfComponent => (props){
2. Change defaultProp, propTypes to NameOfComponent.defaultProp, NameOfComponent.propTypes.
3. Remove the constructor
4. Remove the render() method, keep the return
5. Convert all methods to function for hoisting.
6. Use useRef for all instance variables.
7. Replace all lifecycle functnion to useEffect.
8. Use useRef or useContext As needed.
9. Remove all references to ‘this’ throughout the component
10. Set initial state with useState(). ie…
11. Declare some undeclared member variables. (this.variable)
12. Adjust duplicated variable names.

Additional Considerations

• When I use useEffect, I got lint warning from exhaustive-deps ESLint rule (https://github.com/facebook/react/issues/14920). I checked the operation, but lint-warning is occurring. More discussion is needed to solve this problem.

• This fix fails to render. It is occurring on some part to access class instance method using ref. Function component doesn't have instance, so It will be solved on PLAT-98204. That why it is draft PR.

Step1> Launch the VirtualGridList sampler
Step2> Wheel over the list

Links

PLAT-98506

[CLAassistant]

All committers have signed the CLA.