Effection examples

[taras]

We must provide examples of how Effection can be used for different things.

For frontend the conders are,

• form validation
• autocomplete

1. React
   • Loading spinner example
   • Autocomplete example
2. Vue
3. CLI
4. Express service

What examples would you like to see?

[Atrue]

@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

effection-react-autocomplete/src/hooks/useTask.ts at main · taras/effection-react-autocomplete

Contribute to taras/effection-react-autocomplete development by creating an account on GitHub.

[Atrue]

@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?

GitHub

GitHub - Atrue/react-concurrency-examples

Contribute to Atrue/react-concurrency-examples development by creating an account on GitHub.

GitHub

react-concurrency-examples/src/hooks/useTaskEffect.ts at main · Atrue/react-concurrency-examples

Contribute to Atrue/react-concurrency-examples development by creating an account on GitHub.

GitHub

effection-react-autocomplete/src/hooks/useTask.ts at main · taras/effection-react-autocomplete

Contribute to taras/effection-react-autocomplete development by creating an account on GitHub.

GitHub

react-concurrency-examples/src/hooks/useTaskCallback.ts at main · Atrue/react-concurrency-examples

Contribute to Atrue/react-concurrency-examples development by creating an account on GitHub.

GitHub

react-concurrency-examples/src/examples/autosuggest-task/index.tsx at main · Atrue/react-concurrency-examples

Contribute to Atrue/react-concurrency-examples development by creating an account on GitHub.

GitHub

react-concurrency-examples/src/hooks/useTaskResource.ts at main · Atrue/react-concurrency-examples

Contribute to Atrue/react-concurrency-examples development by creating an account on GitHub.

GitHub

react-concurrency-examples/src/examples/detail-view-task/index.tsx at main · Atrue/react-concurrency-examples

Contribute to Atrue/react-concurrency-examples development by creating an account on GitHub.

GitHub

react-concurrency-examples/.eslintrc.cjs at main · Atrue/react-concurrency-examples

Contribute to Atrue/react-concurrency-examples development by creating an account on GitHub.