Fix NTP Stats Toggle

[fallaciousreasoning]

Resolves brave/brave-browser#24985

Submitter Checklist:

• I confirm that no security/privacy review is needed, or that I have requested one
• There is a ticket for my issue
• Used Github auto-closing keywords in the PR description above
• Wrote a good PR/commit description
• Squashed any review feedback or "fixup" commits before merge, so that history is a record of what happened in the repo, not your PR
• Added appropriate labels (QA/Yes or QA/No; release-notes/include or release-notes/exclude; OS/...) to the associated issue
• Checked the PR locally: npm run test -- brave_browser_tests, npm run test -- brave_unit_tests, npm run lint, npm run gn_check, npm run tslint
• Ran git rebase master (if needed)

Reviewer Checklist:

• A security review is not needed, or a link to one is included in the PR description
• New files have MPL-2.0 license header
• Adequate test coverage exists to prevent regressions
• Major classes, functions and non-trivial code blocks are well-commented
• Changes in component dependencies are properly reflected in gn
• Code follows the style guide
• Test plan is specified in PR before merging

After-merge Checklist:

• The associated issue milestone is set to the smallest version that the
  changes has landed on
• All relevant documentation has been updated, for instance:
  • https://github.com/brave/brave-browser/wiki/Deviations-from-Chromium-(features-we-disable-or-remove)
  • https://github.com/brave/brave-browser/wiki/Proxy-redirected-URLs
  • https://github.com/brave/brave-browser/wiki/Fingerprinting-Protections
  • https://github.com/brave/brave-browser/wiki/Brave%E2%80%99s-Use-of-Referral-Codes
  • https://github.com/brave/brave-browser/wiki/Custom-Headers
  • https://github.com/brave/brave-browser/wiki/Web-Compatibility-Exceptions-in-Brave
  • https://github.com/brave/brave-browser/wiki/QA-Guide
  • https://github.com/brave/brave-browser/wiki/P3A

Test Plan:

[brave-builds]

A Storybook has been deployed to preview UI for the latest push

[sangwoo108]

LGTM. Works well!

[sangwoo108]

Whoa, it is my understanding that, when this was called by getInitialValue(), this wasn't bound and caused failure. And you fixed this by using arrow function as this in arrow function is who defines it, in this case PrefHookMananger<t>. Am I right? Interesting!

So do you usually prefer this methodology than bind? To me, using arrow function looks more handy and robust.

[fallaciousreasoning]

Yeah, exactly 😄 Generally, I prefer arrow functions because they're easier to reason about but they do have a couple of downsides when used with classes. For example, if you use an arrow function on a class, each instance of the class will have a separate function, whereas with a traditional JS function they'll be the same instance.

class FuncClass {
    myFunc() {}
}

class ArrowClass {
    myFunc = () => {}
}

console.log(new FuncClass().myFunc === new FuncClass().myFunc) // true
console.log(new ArrowClass().myFunc === new ArrowClass().myFunc) // false

but if we bind we get the same result anyway 😆