Skip to content

Performance

Jump to bottom
Fluent UI Team edited this page Apr 9, 2022 · 6 revisions

This document describes good/bad practices for performance. If you have any concerns/questions regarding performance, feel free to reach out to us by reporting a GitHub issue.

Styles prop

Fluent V7 components support styles prop for you to customize styles. It can impact performance negatively if it's constantly mutating on every render. This is because if styles is changed by reference, styles need to be recalculated with a cost.

Styles is an object.

Good

const checkboxStyles = { root: { background: 'red' } };
const App = () => {
  return <Checkbox styles={checkboxStyles} />;
};

Bad

const App = () => {
   return (
      <Checkbox styles={{ root: { background: 'red' }} />
   );
};

Styles is a function.

Good

const checkboxStyles = ({ checked }) => ({ root: { background: checked ? 'red' : 'blue' } });

const App = () => {
  return <Checkbox styles={checkboxStyles} />;
};

Bad

const App = () => {
  return (
    <Checkbox styles={({ checked }) => ({ root: { background: checked ? 'red' : 'blue' } })} />
  );
};

Good

With memoization.

import { memoizeFunction } from '@fluentui/react/lib/Utilities';

const getCheckboxStyles = memoizeFunction(background => ({ root: { background } }));

const App = () => {
  const [color, setColor] = React.useState('red');
  const toggleColor = () => setColor(color === 'red' ? 'blue' : 'red');
  return (
    <>
      <button onClick={toggleColor}>Toggle color</button>
      <Checkbox styles={getCheckboxStyles(backgroundColor)} />
    </>
  );
};

Bad

New styles object will be passed every time getCheckboxStyles is called :(

const getCheckboxStyles = background => ({ root: { background } });

const App = () => {
  const [color, setColor] = React.useState('red');
  const toggleColor = () => setColor(color === 'red' ? 'blue' : 'red');
  return (
    <>
      <button onClick={toggleColor}>Toggle color</button>
      <Checkbox styles={getCheckboxStyles(backgroundColor)} />
    </>
  );
};

Do not use React.useMemo for memoizing styles creation, because it resets the cache every time component unmounts. It will help in case of re-renders, but not if the same component gets mounted multiple times.

const App = () => {
  const [color, setColor] = React.useState('red');
  const toggleColor = () => setColor(color === 'red' ? 'blue' : 'red');
  const checkboxStyles = React.useMemo(() => ({ root: { background: color } }), [color]);

  return (
    <>
      <button onClick={toggleColor}>Toggle color</button>
      <Checkbox styles={checkboxStyles} />
    </>
  );
};

What's new

Planning

Process

Usage

Reporting issues

Contributing

Component creation and convergence

Testing

Coding guidelines

Best practices

References

Useful tools

Clone this wiki locally