Try state in context with useHook #796

david-szabo97 · 2020-11-27T11:47:41Z

Resolves: #745

Alternative implementation to #792, I felt like #792 more of a hack rather than a solution. That's why I moved on and tried to come up with a solution that doesn't change the core and more reusable.

Benefits

Less code, no need to spread those states everywhere
Better performance, less rerenders

Goals

100% backward compatibility. It should work with every existing component without any changes. This isn't proved yet but I'll include tests later on.
Should be easy to enable this new feature for existing and upcoming components

Is there anything we need to do to enable this feature for components?

Yes

The PR introduces two new hooks: useStateContextConsumer and useStateContextProvider. To create a context you can use the helper function createStateContext.

`useStateContextProvider`

This hook should be used by the parent component. For example ComboboxPopover is a component that contains ComboboxOption. In this case, ComboboxPopover is the parent component and it should provide the context.

First, you will need a context:

export const StateContext = createStateContext<
  Partial<unstable_ComboboxState>
>();

Then you need to add the hook to the compose array as the very first value:

compose: [useStateContextProvider(StateContext), useComboboxList, usePopover],

If your component is using useComposeProps too, then you need to add the hook there as well:

useComposeProps(options, { tabIndex, ...htmlProps }) {
  htmlProps = useStateContextProvider(StateContext)(options, htmlProps, true);
  htmlProps = useComboboxList(options, htmlProps, true);
  htmlProps = usePopover(options, htmlProps, true);

  return {
    ...htmlProps,
    tabIndex: tabIndex ?? undefined,
  };
}

`useStateContextConsumer`

This hook should be used by the child component. For example ComboboxPopover is a component that contains ComboboxOption. In this case, ComboboxOption is the child component and it should consume the context.

You should create a context in your parent component as mentioned above. Then you need to add the hook to the compose array as the very first value:

compose: [
  useStateContextConsumer({
    context: StateContext,
    shouldUpdate: (id, state, nextState) => {
      return (
        state.currentId === null ||
        nextState.currentId === null ||
        id === state.currentId ||
        id === nextState.currentId
      );
    },
    updateDependencies: (state) => [state?.currentId],
  }),
  useComboboxItem,
  useCompositeItem,
]

useStateContextConsumer takes an object with 3 properties:

context the context that you would like to consume, this should be the context that your parent component provides
shouldUpdate a function that returns whether the component should update its state or not. This function gives you 3 parameters: id of the component, state current state of the component and nextState which is the state that we just received from the context. If we return true, then the nextState will be applied to the component.
updateDependencies under the hood, the pubsub system takes some dependencies. According to these dependencies, your component resubscribes to the pubsub system. This makes sure you receive correct values in shouldUpdate.

How to test?

npm run storybook
Open Combobox -> Combobox Non Context Vs Context

Does this PR introduce breaking changes?

Hopefully not!

ariakit-bot · 2020-11-27T11:54:29Z

Deploy preview for reakit ready!

Built with commit 8dfd5e4

https://deploy-preview-796--reakit.netlify.app

github-actions · 2020-11-27T11:55:03Z

Size Change: +1.15 kB (0%)

Total Size: 258 kB

Filename	Size	Change
`packages/reakit-playground/dist/reakit-playground.min.js`	187 kB	+44 B (0%)
`packages/reakit/dist/reakit.min.js`	37.1 kB	+1.1 kB (+3%)

ℹ️ View Unchanged

Filename	Size	Change
`packages/reakit-system-bootstrap/dist/reakit-system-bootstrap.min.js`	19.1 kB	0 B
`packages/reakit-system-palette/dist/reakit-system-palette.min.js`	8.85 kB	0 B
`packages/reakit-system/dist/reakit-system.min.js`	2.45 kB	0 B
`packages/reakit-utils/dist/reakit-utils.min.js`	3.46 kB	0 B

_{compressed-size-action}

david-szabo97 · 2020-11-27T11:58:30Z

@diegohaz This is an alternative implementation that is not hacking into the createComponent. I would like to avoid that to make it more reusable and robust. This way we can totally decouple the StateContext and all the related components.

And it is using createHook so it's more Reakit-ish way.

packages/reakit-system/src/useStateContextConsumer.tsx

ariakit-bot · 2020-11-27T12:03:51Z

Deploy preview for reakit ready!

Built with commit 22fe86c

https://deploy-preview-796--reakit.netlify.app

codesandbox-ci · 2020-11-27T12:06:38Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 3937cf9:

Sandbox	Source
Reakit	Configuration

ariakit-bot · 2020-11-27T12:11:46Z

Deploy preview for reakit ready!

Built with commit 3937cf9

https://deploy-preview-796--reakit.netlify.app

codecov · 2021-02-09T14:04:03Z

Codecov Report

Merging #796 (3937cf9) into master (9a59d99) will decrease coverage by 0.32%.
The diff coverage is 77.46%.

@@            Coverage Diff             @@
##           master     #796      +/-   ##
==========================================
- Coverage   95.12%   94.80%   -0.33%     
==========================================
  Files         231      237       +6     
  Lines        3510     3581      +71     
  Branches      955      967      +12     
==========================================
+ Hits         3339     3395      +56     
- Misses        170      184      +14     
- Partials        1        2       +1

Impacted Files	Coverage Δ
...__examples__/ComboboxNonContextVsContext/index.tsx	`0.00% <0.00%> (ø)`
...ages/reakit/src/StateContext/createStateContext.ts	`66.66% <66.66%> (ø)`
...eakit/src/StateContext/useStateContextConsumer.tsx	`90.00% <90.00%> (ø)`
...eakit/src/StateContext/useStateContextProvider.tsx	`95.45% <95.45%> (ø)`
packages/reakit/src/Combobox/ComboboxOption.ts	`100.00% <100.00%> (ø)`
packages/reakit/src/Combobox/ComboboxPopover.ts	`100.00% <100.00%> (ø)`
...x/__examples__/AccessibleComboboxContext/index.tsx	`100.00% <100.00%> (ø)`
...ackages/reakit/src/StateContext/useStateContext.ts	`100.00% <100.00%> (ø)`
... and 5 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 9a59d99...3937cf9. Read the comment docs.

david-szabo97 · 2021-02-11T11:32:16Z

@diegohaz @tom-sherman Just finished this up 😄 Tests are passing. I'll experiment with other components as well. Would like to hear your thoughts about this implementation.

tom-sherman · 2021-02-11T11:35:50Z

Amazing work @david-szabo97 🚀

I currently don't have time to review Reakit PRs (I work on react native right now and am currently trying to fight off burnout in these trying times, so avoiding out of hours projects) - I've removed myself from the review request - hope you don't mind!

brianespinosa · 2021-07-12T21:44:31Z

This looks pretty slick, and definitely way better for userland in general. I will give the tires a kick on this on our functional design system sometime next week to see how it feels.

diegohaz · 2021-07-13T01:09:13Z

@brianespinosa Thanks! That will help a lot. I'm more focused on v2 right now, but it would be awesome to have this feature on v1 as well. David has done an excellent job.

brianespinosa · 2021-07-14T19:44:34Z

@diegohaz do we have an alpha or nightly build version for v2 that we can take a look at yet? I did not realize that was coming.

diegohaz · 2021-07-14T19:53:52Z

@diegohaz do we have an alpha or nightly build version for v2 that we can take a look at yet? I did not realize that was coming.

Not yet! I'm still experimenting with some different implementations to see if/how they work in real projects, especially considering the new concurrent rendering features on React. Once I have something functional I'll create a branch here and propose the changes. I expect this will take a few months, but I hope to have an alpha version or something by the end of the year.

stale · 2022-01-14T04:14:44Z

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

david-szabo97 requested review from diegohaz and tom-sherman November 27, 2020 11:56

david-szabo97 commented Nov 27, 2020

View reviewed changes

packages/reakit-system/src/useStateContextConsumer.tsx Outdated Show resolved Hide resolved

david-szabo97 added 21 commits February 9, 2021 14:36

Try context

87d73e1

Styling

f26d929

Typing

b39e552

Add createStateContext

5d20394

Remove HOCInner

3025ac7

Use createStateContext

d86f53a

Rename hoc to withStateContextSubscriber

7544049

Fix search in story

65acc9c

Try use hook based context

0ab1237

Cleanup

c800ef7

Rename

e5e1055

Cleanup story

6292bf9

Restore story

2ae46a7

Fix error

abf42d6

Move to own folder

bc67d4d

Typing

b908a81

Update name

05c0000

Add shouldUpdate and updateDeps

2eecaa7

Remove old export

03b684d

Fix

ac22b28

Update

ad90600

Add story

50eaa29

david-szabo97 force-pushed the try/state-in-context-use-hook branch from 3f64099 to 50eaa29 Compare February 9, 2021 13:36

david-szabo97 added 3 commits February 9, 2021 14:41

Remove old code

985f9df

Remove old code

171726f

Checkin build files

3937cf9

david-szabo97 marked this pull request as ready for review February 11, 2021 11:31

tom-sherman removed their request for review February 11, 2021 11:34

navin-moorthy mentioned this pull request Aug 23, 2021

[Checkbox] New Custom Composition RFC adaptui/react-tailwind#129

Merged

stale bot added the stale label Jan 14, 2022

stale bot closed this Jan 23, 2022

diegohaz deleted the try/state-in-context-use-hook branch January 23, 2022 23:13

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Try state in context with useHook #796

Try state in context with useHook #796

david-szabo97 commented Nov 27, 2020 •

edited

Loading

ariakit-bot commented Nov 27, 2020

github-actions bot commented Nov 27, 2020 •

edited

Loading

david-szabo97 commented Nov 27, 2020

ariakit-bot commented Nov 27, 2020

codesandbox-ci bot commented Nov 27, 2020 •

edited

Loading

ariakit-bot commented Nov 27, 2020 •

edited

Loading

codecov bot commented Feb 9, 2021 •

edited

Loading

david-szabo97 commented Feb 11, 2021

tom-sherman commented Feb 11, 2021 •

edited

Loading

brianespinosa commented Jul 12, 2021

diegohaz commented Jul 13, 2021

brianespinosa commented Jul 14, 2021

diegohaz commented Jul 14, 2021

stale bot commented Jan 14, 2022

Try state in context with useHook #796

Try state in context with useHook #796

Conversation

david-szabo97 commented Nov 27, 2020 • edited Loading

Benefits

Goals

Is there anything we need to do to enable this feature for components?

useStateContextProvider

useStateContextConsumer

How to test?

Does this PR introduce breaking changes?

ariakit-bot commented Nov 27, 2020

github-actions bot commented Nov 27, 2020 • edited Loading

david-szabo97 commented Nov 27, 2020

ariakit-bot commented Nov 27, 2020

codesandbox-ci bot commented Nov 27, 2020 • edited Loading

ariakit-bot commented Nov 27, 2020 • edited Loading

codecov bot commented Feb 9, 2021 • edited Loading

Codecov Report

david-szabo97 commented Feb 11, 2021

tom-sherman commented Feb 11, 2021 • edited Loading

brianespinosa commented Jul 12, 2021

diegohaz commented Jul 13, 2021

brianespinosa commented Jul 14, 2021

diegohaz commented Jul 14, 2021

stale bot commented Jan 14, 2022

david-szabo97 commented Nov 27, 2020 •

edited

Loading

`useStateContextProvider`

`useStateContextConsumer`

github-actions bot commented Nov 27, 2020 •

edited

Loading

codesandbox-ci bot commented Nov 27, 2020 •

edited

Loading

ariakit-bot commented Nov 27, 2020 •

edited

Loading

codecov bot commented Feb 9, 2021 •

edited

Loading

tom-sherman commented Feb 11, 2021 •

edited

Loading