microsoft / microsoft/applicationinsights-react-js

useTrackEvents skipFirstRun not working properly in React strict mode

Open
#54 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

investigation required
Dominant language
JavaScript
Stars
47
Forks
18
Avg merge
1d 2h
Merged PRs (30d)
8

Description

When you run your application in development mode and with the strict mode on the skipFirstRun parameter is not working properly. The reason for this is that when the strict mode tries to identifying unsafe lifecycles it will rerender your component making it call the function twice by default. This is not going to happen in production environment, but can be confusing in dev mode.

Steps to Reproduce

  • OS/Browser: Windows/Chrome
  • React Version: 18.2.0

Use the useTrackEvent hook in dev mode with the strict mode on.

Expected behavior
useTrackEvents skipFirstRun parameter works properly in development with strict mode.

Additional context
To prevent this issue, all you need to do is set the firstRun variable back to true, when the hook unmounts. I can create a PR for this if you want.

Thanks!

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.

Research direction

Start by locating the useTrackEvent hook and reproduce the issue in a React 18.2.0 development build with Strict Mode enabled. Inspect how skipFirstRun behaves across the hook's mount and unmount cycle, then verify that the callback is skipped only on the initial run in development and still behaves correctly in production.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend, observability-sre
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.