Rules of hooks

Open
#465 2 comments 11 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
25/100
Issue type
Feature
Clarity
Needs clarification
Activity status
Stale
Tech stack
react
Domain
frontend

Research direction

Start with the React rules-of-hooks documentation linked in the issue and compare it with the current ESLint-on-generated-JavaScript workaround. The issue does not name files, tests, or an entry point, so the implementation scope and completion criteria would need to be established before work begins.

Written by the indexing model from the issue text.

Description

docs help wanted

Have there been any plans or proposals to implement the “rules of hooks” into ReasonReact?

(ReactJS docs on the topic for context).

A common pitfall with hooks is that they have a lot of rules you have to follow to avoid breaking your app. Since ReasonReact is using hooks as the recommended way to handle state now, would it be possible to integrate these rules directly into the language?

ReactJS is actually ahead of us in this regard. Their ESLint hooks plugin will give you warnings and errors when you don’t use a hook correctly. The Create-React-App build script will even fail to compile if there are any hooks errors.

Accidentally breaking a hooks rule is very easy, even for someone who tries not to. If you have a big hook, it may be hard to keep track of the dependencies, for example. Fixing these errors can be difficult when the only symptom is that your app doesn’t seem to work as expected at runtime.

A current workaround for this issue is to run ESLint on the JS output. However, this has its own shortcomings. For example, the plugin can only understand the output of hooks if it’s destructured when it’s declared, like this: const [count, setCount] = useState(0);. Since BuckleScript doesn’t output JS like this, the plugin won't understand that setCount is a hook dispatch, and it will throw an unncessary dependency warning if you use it inside another hook.

I imagine that adding this to ReasonReact won’t be trivial, but other React features are first-class citizens already. If it’s possible, I think it would be a great new feature.

Dominant language
Reason
Stars
3.3k
Forks
344
No merged PRs in 30d

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from reasonml/reason-react

All issues in reasonml/reason-react

Similar issues

More Web Dev issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.