Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[email protected]: can't use hooks in withTracker #363

Closed
wolasss opened this issue Aug 20, 2022 · 5 comments · May be fixed by #405
Closed

[email protected]: can't use hooks in withTracker #363

wolasss opened this issue Aug 20, 2022 · 5 comments · May be fixed by #405

Comments

@wolasss
Copy link

wolasss commented Aug 20, 2022

It seems that in 2.5.1 you can't use hooks inside withTracker anymore. I referenced this issue in #354 (comment) and now I am creating a separate issue for it.

Please take a look in the reproduction repository:

https://github.com/wolasss/meteor-react-data-2.5.1-bug

I used meteor react boilerplate, I simply added useContext in withTracker to demonstrate the issue:

export default withTracker(()=>{
    const contextValue = useContext(TestContext);

    return {
        links: LinksCollection.find().fetch(),
        contextValue
    }
})(Info);

Well, it does not have to be useContext but any other hook. It throws an error:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at Object.throwInvalidHookError (modules.js?hash=680ff16881b1d15688855d95d47029972b45b8a0:18867:13)
    at useContext (modules.js?hash=680ff16881b1d15688855d95d47029972b45b8a0:2628:21)
    at Info.jsx:22:26
    at withTracker.tsx:19:15
    at useTracker.ts:69:18
    at Computation._compute (tracker.js:308:7)
    at Computation._recompute (tracker.js:324:16)
    at Tracker._runFlush (tracker.js:495:14)
    at onGlobalMessage (meteor.js?hash=b9ec8cf25b6fc794ae6b825f30e06c3c35c50e7c:520:23)

If you switch to v2.4.0, the problem does not exist (branch v2.4.0 in reproduction repo)
@wolasss
Copy link
Author

wolasss commented Oct 24, 2022

This seems to be a regression introduced in 384da2f . In the app where I have a bunch of hooks inside withTracker the whole app goes to infinite loop of rendering (both react v17 and v18). Maybe it is related to the "an attempt to retain the "side-effect"
we are creating during first render" @CaptainN ?

@CaptainN
Copy link
Contributor

CaptainN commented Oct 27, 2022 •
edited
Loading

It's not really a regression, because you really shouldn't be using other hooks within useTracker's computation handler (whether used with the hook or hoc). That was never supported, and I'm surprised you haven't run in to problems sooner.

Meteor really should not support this in useTracker (and family), and we should even consider throwing a warning when such use is detected.

Instead, you should compose your hooks within another hook (or hoc), so that they work side by side, and not nested.

@CaptainN
Copy link
Contributor

CaptainN commented Oct 27, 2022 •
edited
Loading

You can make your own hoc out of useTracker, and then compose your hooks something like this:

const withMahStuff = (Component) => (props) => {
  const links = useTracker(() => {
    return LinksCollection.find().fetch()
  }, [])
  const contextValue = useContext(TestContext)
  const newProps = {
    ...props,
    links,
    contextValue
  }
  return <Component {...newProps} />
}

export default withMahStuff(Info)

Check out more examples from the old useTracker post on medium.

@CaptainN CaptainN removed the bug label Oct 27, 2022
@StorytellerCZ
Copy link
Collaborator

Let's deprecate withTracker and throw a warning.

@henriquealbert
Copy link
Member

I agree with you, @StorytellerCZ - or at least- give some guidance on the warning.

@StorytellerCZ StorytellerCZ mentioned this issue May 25, 2024
Open
@StorytellerCZ StorytellerCZ linked a pull request May 25, 2024 that will close this issue
Deprecation warning for withTracker #405
Open
@wolasss wolasss closed this as completed Oct 31, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Deprecation warning for withTracker meteor/react-packages
4 participants
@CaptainN @wolasss @StorytellerCZ @henriquealbert