Skip to content

Stack causes unexpected spacing when children are re-rendered #1470

Closed as not planned
@yangwooseong

Description

@yangwooseong

Summary

스택의 children 에 리렌더링이 일어날 때 원하지 않는 spacing 이 주입될 수 있습니다.

Reproduction process

const firstValidElementIdx = useRef(-1)
return (
<Styled.Container
ref={forwardedRef}
as={as}
data-testid={testId}
style={style}
className={className}
interpolation={interpolation}
direction={direction}
justify={justify}
align={align}
{...rest}
>
{ Children.map(
children,
(element, index) => {
if (!isValidElement(element)) { return element }
/**
* NOTE: this assumes that this element is `StackItem`.
*
* Even if the child is not a `StackItem` component,
* it could forward the prop to `StackItem` deeper in the tree,
* or implement a custom behavior compatible with `StackItemProps`.
*/
if (firstValidElementIdx.current === -1) { firstValidElementIdx.current = index }
return cloneElement(element, {
...element.props,
direction,
marginBefore:
element.props.marginBefore ??
(index > firstValidElementIdx.current ? spacing : 0),
})
},
) }
</Styled.Container>
)
})

Stackspacing 을 받아서 StackItemmarginBefore 로 넘기는 조건으로, StackItem 이 첫 번째 React element 보다 뒤에 있는지를 판단하고 있습니다. 이 때 useRefindex 를 저장하고 있다 보니 children이 리렌더링이 일어나서 바뀌더라도 index가 갱신되지 않습니다. 예를 들면 다음과 같은 상황입니다.

리렌더링 전

<Stack spacing={2}>
  <StackItem>1<StackItem>

  <StackItem>2<StackItem>
</Stack> // firstValidElementIdx.current = 0

리렌더링 후

<Stack spacing={2}>
  false

  <StackItem>2<StackItem>
</Stack> // firstValidElementIdx.current  여전히 0 이므로  번째 StackItem  marginBefore  들어감

Version of bezier-react

1.7.1

Browser

No response

Operating system

  • macOS
  • Windows
  • Linux

Additonal Information

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugIssues related to anything that isn't workingstatus:pendingIssue or PR that is now pendingstatus:wontfixIssue that will not be worked on

    Type

    No type

    Projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions