Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove sQuery and encourage use of Hooks #23

Open
esr360 opened this issue Jun 7, 2019 · 0 comments
Open

Remove sQuery and encourage use of Hooks #23

esr360 opened this issue Jun 7, 2019 · 0 comments

Comments

@esr360
Copy link
Collaborator

esr360 commented Jun 7, 2019

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).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant