Bugfix/#602 - Add support for React 19

[iwan-uschka]

This PR adds support for React 19 by fixing TS issues regarding useRef (see https://react.dev/blog/2024/04/25/react-19-upgrade-guide#useref-requires-argument).

To be able to use React 19 throughout the project i had to update some other dependencies as well.

To be able to use the TypeScript version of this project in VS Code i removed all typescript dependencies from all package.json and added one single typescript dependency to the root package.json. I hope this is ok.

Before this change, they were two versions of typescript: 5.4.3 and 5.3.3. Now we have only one version of typescript: 5.4.3. To avoid running into warnings like

usehooks-ts:lint: =============
usehooks-ts:lint: 
usehooks-ts:lint: WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.
usehooks-ts:lint: 
usehooks-ts:lint: You may find that it works just fine, or you may not.
usehooks-ts:lint: 
usehooks-ts:lint: SUPPORTED TYPESCRIPT VERSIONS: >=4.7.4 <5.4.0
usehooks-ts:lint: 
usehooks-ts:lint: YOUR TYPESCRIPT VERSION: 5.4.3
usehooks-ts:lint: 
usehooks-ts:lint: Please only submit bug reports when using the officially supported version.
usehooks-ts:lint: 
usehooks-ts:lint: =============

when calling pnpm lint i had to update @typescript-eslint to 7.18.0. This required some fixes to add to the codebase.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 761e629

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[iwan-uschka]

I am not sure how the CHANGELOG update is handled properly. I assume the PR gets stashed before getting merged so i don't know the merge commit ID to use in the CHANGELOG.

So a few questions:

• How to handle the CHANGELOG?
• Was it correct to bump the version numbers?
• I am not sure if this PR should result in a new version immediately. Who decides this?

[iwan-uschka]

I tested the implementation also with React 18 in another repository. AFAIK it's not possible to add another app to this monorepo using React 18 next to the current implementation using React 19.

[ondrej-langr]

I am not sure how the CHANGELOG update is handled properly. I assume the PR gets stashed before getting merged so i don't know the merge commit ID to use in the CHANGELOG.

So a few questions:

• How to handle the CHANGELOG?
• Was it correct to bump the version numbers?
• I am not sure if this PR should result in a new version immediately. Who decides this?

Just read the provided documentation - its just there in provided comment that was made by the bot... Click here to learn what changesets are, and how to add one.

[alexshenker]

@juliencrn Could this be expedited please?

[iwan-uschka]

Thanks @ondrej-langr. For someone who doesn't know changesets at all like myself https://github.com/juliencrn/usehooks-ts/blob/master/.github/CONTRIBUTING.md doesn't provide much information how to handle it properly in this repository. #665 (comment) complained about a missing changeset but it didn't help me out but made me feel uncertain. So i asked :)

According to https://www.npmjs.com/package/@changesets/cli the main purpose of changesets is to

manage the versioning and changelog entries

and

Contributor runs:
npx changeset

and

When the maintainer wants to release packages, they should run
npx changeset version
...
npx changeset publish

. So i reverted the version updates i previously added manually and added a changeset via npx changeset to this PR. I hope this is correct.

[ondrej-langr]

@iwan-uschka Indeed! Great job! Just a quick sidenote about the changeset message - remove that (#602 by @CHE1RON) part as that is added by changeset package itself ;) (you can look at previous releases and their commits)

Changesets are unique in a way that you dont have to adhere to any maximum characters as far as i know so you can add bigger explanations of your updates. One pull request can have multiple changesets even! (but in that case its better to just make more PRs)

[iwan-uschka]

Thx again @ondrej-langr.

you can look at previous releases and their commits

I did exactly that but still got confused because you can find commits like b14db5b using that notation i used or 7ba7e3a with no changeset at all.

Anyway, (#602 by @CHE1RON) has been removed. Thanks for the patience :)

[lachieh]

In the interest of speed and getting this reviewed as quickly as possible, it might be worth moving the changes related to www and the eslint-config-custom packages into another PR—maybe even two separate PRs. They can reference this branch as the base, which means that once this branch merges they will be able to fast follow, but they shouldn't hold up the merge IMO.

Edit: Thanks @iwan-uschka for the work on this. It looks great!

[musjj]

The last commit is from nearly a year ago. Perhaps this project is dead?

[iwan-uschka]

Two options: i am too stupid or the UI is bullshit. I can see, that @lachieh took a look and reviewed this PR. Thanks for that (if that's the case 😸). But i cannot see any approval or change request. So i don't know what to do here.

I have to apologize, i don't have the time right now to split things up into multiple PRs. I don't even know if the "complexity" of this PR is the crucial part here, like @musjj said.

I am new to open source on Github, i don' know who is capable of merging this PR or even approving it. Is it the owner only (i hope not) or is it the bigger group of contributors, is it anybody?

Is it ok to ping the owner of this repo? According to https://github.com/juliencrn he is active but not in this repository as it seems.

[lnhrdt]

Thanks for all the work you've put into this PR, @iwan-uschka. I'm not a maintainer, just another eager user who’s been subscribed to this issue. From what I can see, all the most recently merged PRs were handled by Julien, so I'd guess he's the only one with merge permissions.

It might feel a bit bold, but I've had some luck in the past reaching out to the owners of stale open source projects via email. If @juliencrn doesn't respond to this ping, you could try using the email address listed on his personal site: https://www.juliencaron.com/contact.

[iwan-uschka]

Maybe we have to create a separate issue to discuss the future (or at least the present 😄 ) of this project with juliencrn.

[juliencrn]

Hi @iwan-uschka, thanks for all but I've just merged #651 to support React 19, this one did too many things at once.
Anyway, usehooks-ts now supports React 19 in its latest 3.1.1 release, apologies for the delay.

[juliencrn]

Fixes #602, #650 & #668

[iwan-uschka]

Hi @iwan-uschka, thanks for all but I've just merged #651 to support React 19, this one did too many things at once. Anyway, usehooks-ts now supports React 19 in its latest 3.1.1 release, apologies for the delay.

First: thanks @juliencrn for breaking the silence :)

The problem with the latest release is, that it changes nothing in terms of usability. This commit doesn't fix any compatibility issue between this library and React 19.

I might agree that my PR does a lot things at once but i think these changes are necessary. I expect that a small PR like this can be reviewed or at least discussed and not just closed out of the blue after 6 weeks of silence.

[lachieh]

Thanks, @iwan-uschka. I know it can be frustrating to get a PR closed when you've used your own time and put the work in to help fix problems for the wider community.

If you're still up for contributing and you want to resolve #602, I would suggest that you submit a few new PRs that break this one up.

Here's how I would break up the changes as PRs as changesets:

1. Fix type errors against react@19 (this is the one that would resolve [BUG] Compatibility with React v19 #602)
   • usehooks-ts: major: Include all the changes you have in the package folder.
     Because the dependencies have breaking changes, this should be a major version bump.
   • www: minor: Update docs to detail new major version release of usehooks-ts package
     _Don't need a major here because this project doesn't explicitly depend on the usehooks-ts package, but this change would add new features (new content)
2. Update Website to Next 15
   • www: major: Upgrade to next@15 and react@19
     This is a good update—it's nice to keep up with latest versions. major because next and react deps are major version changes
3. Update dependencies for eslint-config-custom
   • eslint-config-custom: minor: Update dependencies
     Same as above, good to keep up to date. minor because deps are minor version changes. I would avoid doing this until last and then also apply any linting fixes that show up becuase of the change. If these fixes affect the other packages, they should receive patch changes

It for sure seems like a lot of work, but splitting it up like this means that each one of those PRs can be reviewed and merged entirely independent from each other. You mentioned that you're new to OSS, so I'll link this article around best practices—please don't take offense if you've heard this all before! Even writing excellent PRs means that you're creating more work for someone else, so the least you can do is make that work as easy to do as possible.

If you'd like some assistance with any of this, let me know. I'm happy to help!

[iwan-uschka]

Thank you @lachieh for the support, time and effort. I created new PRs to address the issues separately:

• Add React 19 support #675
• Update dev dependencies #676

I ran out of time so there is no extra PR for updating www to next@15. Anyway, hope this fits the needs.

ps: i didn't want to sound too disappointed in my previous post, just felt a little baffled

[lachieh]

All good, @iwan-uschka! I'm not a maintainer here, I just have poke around in a few OSS projects so try to help when I can.

@juliencrn, both of these PRs look good!

[nummi]

Thank you @iwan-uschka for putting in the work.