Effection examples
Opened this issue · 2 comments
We must provide examples of how Effection can be used for different things.
For frontend the conders are,
- form validation
- autocomplete
- React
- Vue
- CLI
- Express service
What examples would you like to see?
@taras What do you think about adding this file to the library https://github.com/taras/effection-react-autocomplete/blob/main/src/hooks/useTask.ts? I suppose it's a common case for React to run a task in the useEffect. Maybe it's worth adding something like a common library for React, like effection/react.
One more benefit is to add an eslint rule for the deps. Actually, the only thing is needed is:
"rules": {
"react-hooks/exhaustive-deps": ["warn", {
"additionalHooks": "useTask"
}]
}It makes the linter to check all the deps the same way as it does for useEffect and etc.
GitHub
Contribute to taras/effection-react-autocomplete development by creating an account on GitHub.
@taras I’ve made a repo comparing effection with async approach in some react examples https://github.com/Atrue/react-concurrency-examples/tree/main
Currently, I see 3 additional hooks that may be useful for react developers:
useTaskEffect - https://github.com/Atrue/react-concurrency-examples/blob/main/src/hooks/useTaskEffect.ts. It’s similar to https://github.com/taras/effection-react-autocomplete/blob/main/src/hooks/useTask.ts, but I think it’s better to have effect in the name as it’s run in the useEffect hook.
useTaskCallback - https://github.com/Atrue/react-concurrency-examples/blob/main/src/hooks/useTaskCallback.ts. Similar to useCallback, but for tasks. It returns [runTask, stopTask] functions to be easily controlled over the component. The goal is to stop previous task once the new runTask() is called to have the only task running and also stops the task on component unmounting. You may also check the usage here https://github.com/Atrue/react-concurrency-examples/blob/main/src/examples/autosuggest-task/index.tsx#L28
useTaskResource - https://github.com/Atrue/react-concurrency-examples/blob/main/src/hooks/useTaskResource.ts. It is similar to useTaskEffect, but saves the result and progress in the component state. The usage - https://github.com/Atrue/react-concurrency-examples/blob/main/src/examples/detail-view-task/index.tsx#L23
Also, as I noticed before, there is as an additional eslint configuration for these hooks to check the deps argument for all these hooks https://github.com/Atrue/react-concurrency-examples/blob/main/.eslintrc.cjs#L19.
What do you think about these examples and moving these hooks to a separate library?
Contribute to Atrue/react-concurrency-examples development by creating an account on GitHub.
Contribute to Atrue/react-concurrency-examples development by creating an account on GitHub.
Contribute to taras/effection-react-autocomplete development by creating an account on GitHub.
Contribute to Atrue/react-concurrency-examples development by creating an account on GitHub.
Contribute to Atrue/react-concurrency-examples development by creating an account on GitHub.
Contribute to Atrue/react-concurrency-examples development by creating an account on GitHub.
Contribute to Atrue/react-concurrency-examples development by creating an account on GitHub.
Contribute to Atrue/react-concurrency-examples development by creating an account on GitHub.