react-component / react-component/tabs

Avoid using setTimeout in inkTabBarNode

Open
#135 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
572
Forks
241
Avg merge
4d 18h
Merged PRs (30d)
4

Description

in https://github.com/react-component/tabs/pull/134, we're doing a quick fix by using setTimeout to calculate inkTabBarNode position after parent/root node mounted.

The source reason is that InkTabBarNode needs to do a offset calculation upon componentDidMount based on parent/root node ref. In the original mixin approach, componentDidMount is shared between multiple mixin and can be executed in sequence, but the new composite approach has nested component structure and following React lifecycle sequence:

parent render => children render => children mounted => parent mounted...

So strictly speaking, we have to delay children render in every possible parent of inkTabBarNode. As a quick fix, we did a awkward setTimeout in inkTabBarNode's componentDidMount method to achieve the same purpose.

In fact, the ideal fix was tried here, but apparently more work needs to do https://github.com/react-component/tabs/commit/f019ea098c27df4ebcd7c3cf8a64494fe81c3685#diff-ad3456d46a980c23853783634a1555a7R37

Contributor guide

No contributing guide indexed for this repository

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 reviewing the InkTabBarNode componentDidMount logic and the linked pull request and commits, especially the attempted composite approach. Trace the parent and child mount order and the existing offset calculation. Done means removing the setTimeout while preserving correct ink tab bar positioning after the parent and root references are mounted.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Refactor
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.