# Common mistakes


## Putting onChange into global state

It fires about 60 times a second while you drag. Keep that state local, or save
from `onChangeComplete` instead — see
[onChange vs onChangeComplete](/react/handbook/controlled#onchange-vs-onchangecomplete).

## Expecting injectStyles={false} to shrink your bundle

It only stops the panel writing a `<style>` tag. The CSS is imported by the
module either way, so your build is the same size. Use it for CSP or critical
CSS.

## An unlayered button rule in your own CSS

It will restyle the panel's swatches and tabs. This is the most common cause of a
panel that looks almost right — see
[if the panel looks wrong](/react/handbook/theming#if-the-panel-looks-wrong).

## Expecting the eyedropper everywhere

It renders only where the browser has the `EyeDropper` API. If you need one in
every browser, build your own UI and check `useEyedropper().supported` first.

## Reading hex when you need precision

`hex` is rounded to 8 bits per channel. Store `hsva` and pass it back to `value`
if a color has to survive a round trip unchanged.