[XGrid] Second iteration on resizing logic

[oliviertassinari]

• Fix [XGrid] Column resizing broken in StrictMode #177
• Fix [XGrid] Column resizing is too limiting #191
• Fix [XGrid] Resizing of the last column is wrong #209
• Fix initial mouse move width jump

• Fix scrolling on the last column

• Fix alternatives button clicks, e.g. if you click on the previous page button while your mouse is over the dragging area, it fails.

• Fix interaction area, the whole separator should be interactive

• Fix keep resizing even after releasing the mouse

[oliviertassinari]

https://github.com/mui-org/material-ui/pull/18872/files#r361437151 it's exactly what we have @josgraha :p

[oliviertassinari]

A demonstration that the fix for #177 is working: https://codesandbox.io/s/modest-herschel-4vkmo?file=/package.json

[dtassone]

usememo? avoid to recreate the functions and rerender the subtree...

[oliviertassinari]

Mind that if you review with:

You will see that this line is not linked to the resizing change.

[oliviertassinari]

But the value is spread, so no performance issues here.

[dtassone]

the value is spread but when you do (event)=> something(event) it creates a new function on each render and so shallow equal will never work and the sub tree will always rerender

[oliviertassinari]

It's applied on a div, so using a memo won't help performance. It won't prune a large react rendering tree, the only case where it helps with performance.