You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
sQuery allows interacting with DOM elements directly with a friendly API - the issue however is when the DOM consequently becomes out-of-sync with React's state.
The issue can be seen in the following CodePen; upon the pen loading click the "accordion title 1" text: https://codepen.io/esr360/pen/WBqaKy?editors=0110, 5 seconds after loading, React will update a class on one of the Accordion elements from a container component (which can be considered a proverbial change to some global state) and update the text content of the accordion, thus re-rendering the accordion. This results in the panel closing, despite the user having opened it. This is because React did not know the panel was open because the active class was added directly through the DOM API.
Using React Hooks, the same behaviour can be achieved with an equally friendly API, as seen in the following CodePen: https://codepen.io/esr360/pen/gJNrKX?editors=0110, now when the same action is applied, the accordion remains open because the active class is added by React.
Several of the sQuery APIs (namely the get ones, as opposed to the set ones) will still be useful for Polymorph styling, but by removing the set APIs and instead encourage the use of Hooks, there is arguably less mental overhead for people already familiar with React paradigms, the bundle will be lighter, and there will be no issue of out-of-sync DOMs.
Components will need their repaint() method calling every time React updates the corresponding DOM element (this was previously handled by sQuerys set APIs).
The text was updated successfully, but these errors were encountered:
sQuery allows interacting with DOM elements directly with a friendly API - the issue however is when the DOM consequently becomes out-of-sync with React's state.
The issue can be seen in the following CodePen; upon the pen loading click the "accordion title 1" text: https://codepen.io/esr360/pen/WBqaKy?editors=0110, 5 seconds after loading, React will update a class on one of the Accordion elements from a container component (which can be considered a proverbial change to some global state) and update the text content of the accordion, thus re-rendering the accordion. This results in the panel closing, despite the user having opened it. This is because React did not know the panel was open because the active class was added directly through the DOM API.
Using React Hooks, the same behaviour can be achieved with an equally friendly API, as seen in the following CodePen: https://codepen.io/esr360/pen/gJNrKX?editors=0110, now when the same action is applied, the accordion remains open because the active class is added by React.
Several of the sQuery APIs (namely the
get
ones, as opposed to theset
ones) will still be useful for Polymorph styling, but by removing theset
APIs and instead encourage the use of Hooks, there is arguably less mental overhead for people already familiar with React paradigms, the bundle will be lighter, and there will be no issue of out-of-sync DOMs.Components will need their
repaint()
method calling every time React updates the corresponding DOM element (this was previously handled by sQuerysset
APIs).The text was updated successfully, but these errors were encountered: