Skip to content

Remove sQuery and encourage use of Hooks #23

@esr360

Description

@esr360

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions