3 ms·

How can you ever be sure that your state is valid when you’re putting it on the DOM? Worse yet, only parts of the state is stored there. I can’t really call th

by _v7gu 4y ago

How can you ever be sure that your state is valid when you’re putting it on the DOM? Worse yet, only parts of the state is stored there. I can’t really call this code simple since it had to resort to timing hacks to get its functionality in order. A random 250ms delay and bam, bugs you cannot reliably reproduce

petilon 4y ago
Can you clarify what you mean here? What state is in DOM? Do you mean the state inherent in input elements? What timing hacks are you talking about?
- _v7gu 4y ago
  The first file I looked into was the combo box. This is what I consider to be a timing hack: private onDropDownMouseOver(ev: MouseEvent): void { if ((new Date()).getTime() < this.whenScrolled + 250) { // We automatically get a hover event when we scroll, ignore it in order to keep our current highlight. return; } const element = ev.target as HTMLElement; if (element.classList.contains('combo-dropdown-item')) { addClassExclusively(element, 'combo-highlighted'); } } Some event stores the time it has been fired, and this method checks that it has not been long since the firing. With react, which item has the highlight would have to explicitly be in the state and completely remove the need to do this optimization. And this is an example of what I consider state being stored in the DOM: private isDropDownVisible() { return isVisible(this.dropDown); } The view has logic that depends on whether the dropdown is visible, which is checked by dropdown.style.display !== none. Now any element in your page has the power to modify this component’s logic by modifying the DOM
  - petilon 4y ago
    The timing hack is a workaround for a browser bug. The exact same hack would be required in React as well. What is this browser bug I speak of? Browsers send a spurious "hover" event when you stop scrolling, so that the item under mouse can be highlighted. This can cause problems in some cases. > Now any element in your page has the power to modify this component’s logic by modifying the DOM If some part of your application intentionally does something wrong, it can break your application whether it is React or some other tech. In this particular example, if you prefer, you can have a member variable to keep track of whether the dropdown is visible or not. Still no need for React. As you can see, none of the complexity of React is necessary. No need for hooks, useEffect, useState, useMemo and all that crap.
    - _v7gu 4y ago
      Would it, though? Keyboard event sets highlighted item key/id; scroll event pops up, sets the highlighted item again, then react does not do an additional render because the state has not changed since the keyboard event. The code does not have any complexities of hooks (which are just a javascript approximation of do notation, I don’t believe it is that complex), but what it does have is the requirement to write down all of your mutations correctly, where every “down” is an exact opposite of the “up” and does not leave any artifacts—with no way of formally checking. At least for myself, I think that level of discipline is unreasonably high so I tend to prefer stricter typed functional solutions where the view is composed purely from the state
creamyhorror 4y ago
I'm not sure what timing hacks you're referring to - using setTimeout() with 0 delay? I think that's being done to defer execution of heavier functions and let other timeouts be handled first. Seems more like an optimisation rather than a hack to achieve basic functionality.

by _v7gu 4y ago

petilon 4y ago

Can you clarify what you mean here? What state is in DOM? Do you mean the state inherent in input elements? What timing hacks are you talking about?

_v7gu 4y ago
The first file I looked into was the combo box. This is what I consider to be a timing hack: private onDropDownMouseOver(ev: MouseEvent): void { if ((new Date()).getTime() < this.whenScrolled + 250) { // We automatically get a hover event when we scroll, ignore it in order to keep our current highlight. return; } const element = ev.target as HTMLElement; if (element.classList.contains('combo-dropdown-item')) { addClassExclusively(element, 'combo-highlighted'); } } Some event stores the time it has been fired, and this method checks that it has not been long since the firing. With react, which item has the highlight would have to explicitly be in the state and completely remove the need to do this optimization. And this is an example of what I consider state being stored in the DOM: private isDropDownVisible() { return isVisible(this.dropDown); } The view has logic that depends on whether the dropdown is visible, which is checked by dropdown.style.display !== none. Now any element in your page has the power to modify this component’s logic by modifying the DOM
- petilon 4y ago
  The timing hack is a workaround for a browser bug. The exact same hack would be required in React as well. What is this browser bug I speak of? Browsers send a spurious "hover" event when you stop scrolling, so that the item under mouse can be highlighted. This can cause problems in some cases. > Now any element in your page has the power to modify this component’s logic by modifying the DOM If some part of your application intentionally does something wrong, it can break your application whether it is React or some other tech. In this particular example, if you prefer, you can have a member variable to keep track of whether the dropdown is visible or not. Still no need for React. As you can see, none of the complexity of React is necessary. No need for hooks, useEffect, useState, useMemo and all that crap.
  - _v7gu 4y ago
    Would it, though? Keyboard event sets highlighted item key/id; scroll event pops up, sets the highlighted item again, then react does not do an additional render because the state has not changed since the keyboard event. The code does not have any complexities of hooks (which are just a javascript approximation of do notation, I don’t believe it is that complex), but what it does have is the requirement to write down all of your mutations correctly, where every “down” is an exact opposite of the “up” and does not leave any artifacts—with no way of formally checking. At least for myself, I think that level of discipline is unreasonably high so I tend to prefer stricter typed functional solutions where the view is composed purely from the state

creamyhorror 4y ago

I'm not sure what timing hacks you're referring to - using setTimeout() with 0 delay? I think that's being done to defer execution of heavier functions and let other timeouts be handled first. Seems more like an optimisation rather than a hack to achieve basic functionality.