Skip to content

docs: create document describing act function and related errors - #969

Merged
thymikee merged 5 commits into
mainfrom
docs/act-docs
Jul 19, 2022
Merged

docs: create document describing act function and related errors#969
thymikee merged 5 commits into
mainfrom
docs/act-docs

Conversation

@mdjastrzebski

Copy link
Copy Markdown
Member

Summary

Our users frequently report cryptic errors related to act() function usage, like #379 or #859. In order to address this I've created Understanding Act function document to describe it's why and how to use it. Consider it to be initial version of the document describing the act basics, with intention to add more specific information for async act warnings later on.

Please share your thoughts and suggestions to improve this document.

Test plan

Docs only
I've run docosaurus and manually verified links and layout.

@BartoszKlonowski BartoszKlonowski left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Really good article when it comes to technicals and knowledge, I find it to be detailed and explanatory, but not overwhelming.
I went also through examples by trying them locally 👍

All of my remarks are cosmetic and/or readability concerns - free to merge once covered.

Comment thread website/docs/UnderstandingAct.md Outdated
Comment thread website/docs/UnderstandingAct.md Outdated
Comment thread website/docs/UnderstandingAct.md Outdated

When wrapping rendering call with `act` we see that the changes caused by `useEffect` hook have been applied as we would expect.

### When to use act

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm having a hard time understanding why this is only in "sync" section. How is it when it comes to "async"?

Comment thread website/docs/UnderstandingAct.md Outdated
Comment thread website/docs/UnderstandingAct.md Outdated
Comment thread website/docs/UnderstandingAct.md Outdated
Comment thread website/docs/UnderstandingAct.md Outdated
Comment thread website/docs/UnderstandingAct.md Outdated
Comment thread website/docs/UnderstandingAct.md Outdated

@AugustinLF AugustinLF left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great explanation!

Comment thread website/docs/UnderstandingAct.md Outdated
Comment thread website/docs/UnderstandingAct.md Outdated
test('render with real timers - sleep', async () => {
const view = render(<TestAsyncComponent />);
await act(async () => {
await sleep(50 + 10); // Wait a bit longer then setTimeout in component

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Might be a bit confusing because said component (and initial use of the value 50) is higher in this document and as a reader I'd rather not have to scroll up

@thymikee
thymikee merged commit f6fe982 into main Jul 19, 2022
@thymikee
thymikee deleted the docs/act-docs branch July 19, 2022 10:00
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

Successfully merging this pull request may close these issues.

4 participants