Skip to content
This repository was archived by the owner on Nov 9, 2024. It is now read-only.

Commit 847c768

Browse files
committed
docs: mention perf tip for popperInstance props (#148)
1 parent dae45dd commit 847c768

File tree

1 file changed

+29
-0
lines changed

1 file changed

+29
-0
lines changed

README.md

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -224,6 +224,35 @@ function App() {
224224

225225
[Read more about plugins here](https://atomiks.github.io/tippyjs/plugins/).
226226

227+
### Performance
228+
229+
Props that the `popperInstance` depends on that aren't primitive values should be memoized or hoisted to a static constant, so that the `popperInstance` is not recreated on every render:
230+
231+
- `popperOptions`
232+
- `flipBehavior`
233+
234+
```jsx
235+
// static constant if it doesn't change
236+
const popperOptions = {};
237+
238+
function App() {
239+
const [placement, setPlacement] = useState('right');
240+
// memoized value if it's dynamic
241+
const flipBehavior = useMemo(() => [placement, 'bottom'], [placement]);
242+
243+
return (
244+
<Tippy
245+
content="Tooltip"
246+
placement={placement}
247+
flipBehavior={flipBehavior}
248+
popperOptions={popperOptions}
249+
>
250+
<button />
251+
</Tippy>
252+
);
253+
}
254+
```
255+
227256
### Default props
228257

229258
You can create a new component file that exports a wrapper component that has

0 commit comments

Comments
 (0)