Skip to content
React Truncate

Frequently Asked Questions

Why is the component not updated when only the container width changes?

Currently, the component has a built-in listener for the Window: resize event . When this event is triggered, the component recalculates its width and updates the displayed content.

However, in some cases, such as when using react-resizable-panels , only the container element’s width changes while the browser window width remains the same. In these scenarios, the component will not automatically adjust its size.

Reasons for not processing

To avoid unnecessary performance overhead, the component does not include a built-in ResizeObserver for parent elements. Therefore, when the container size changes without a window resize event, developers need to decide when to trigger a re-render to ensure the component responds correctly to layout adjustments.

Recommend to use a key to trigger re-truncate, nodes will re-render when a key is updated, this is React’s ability .

Trigger via callback API

Set a variable and bind key={refreshKey} to the element that needs to respond to resize changes.

const [refreshKey, setRefreshKey] = useState(Date.now())


// e.g. `<Truncate key={refreshKey} />`

When the element triggers a resize change, update this value.

const onResize = () => setRefreshKey(Date.now())


// e.g. `<Panel onResize={onResize} />`

Online demo: CodeSandbox

Trigger via dependency

If there is a State dependency that can trigger React.useEffect, you can also implement it this way, declaring a common Hook.

// e.g. src/hooks/use-refresh-key.ts
import React from 'react'


export const useRefreshKey = (deps: unknown[]) => {
  const [refreshKey, setRefreshKey] = React.useState(Date.now())


  React.useEffect(() => {
    requestAnimationFrame(() => {
      setRefreshKey(Date.now())
    })
  }, [deps])


  return {
    refreshKey,
  }
}

Treat the related state as a dependency. When the dependency changes, the value of refreshKey will be automatically updated.

const [width, setWidth] = useState(DEFAULT_WIDTH_VALUE)
const [lines, setLines] = useState(DEFAULT_LINES_VALUE)


const { refreshKey } = useRefreshKey([width, lines])


// e.g. `<Truncate key={refreshKey} />`