React Realm中Object.keys致Picker渲染缓慢的优化咨询

Hey there! Let's break down why your simple Picker with just ~4 options is taking 250ms to render—especially since other Realm-based components are performing way better. I’ll walk through likely issues and solutions, starting with the most obvious fix.

First: Fix How You’re Iterating Over Realm.Results #

Looking at your code, the biggest red flag is how you’re looping through units:

Object.keys(units).map((value, index) => {
  return <Picker.Item key={units[index].id.toString()} label={units[index].shortName} value={units[index].shortName} />;
})

Realm.Results is a live, collection-like object—not a plain JavaScript object. Using Object.keys(units) doesn’t iterate over your actual data items; it’s grabbing internal properties of the Results object instead. This means you’re probably doing unnecessary work to access units[index], and each render is triggering extra Realm under-the-hood processing that’s eating up time.

Instead, convert the Results to a proper array first (and cache it to avoid repeated conversions):

const PickerWithPortion: React.FC<PickerProps> = props => {
  const { value, setValue, units } = props;
  // Cache the converted array so it only updates when units changes
  const unitsArray = React.useMemo(() => Array.from(units), [units]);

  return (
    <Picker selectedValue={value} onValueChange={setValue}>
      {unitsArray.map(unit => (
        <Picker.Item 
          key={unit.id.toString()} 
          label={unit.shortName} 
          value={unit.shortName} 
        />
      ))}
    </Picker>
  );
};

This way, you’re directly iterating over your data items, and useMemo prevents re-converting the Results on every render unless the collection actually changes.

Next: Check for Unnecessary Realm Re-queries #

Is the units prop being recreated on every parent component render? If the parent is running a Realm query like realm.objects('Units') without caching it, it’ll pass a new Realm.Results instance to your Picker every time—triggering unnecessary re-renders and data fetching.

In the parent component, cache the query result with useMemo:

const units = React.useMemo(() => realm.objects('Units'), [realm]);

This ensures the same Results instance is passed down unless the Realm instance itself changes.

Should You Sync Realm Data to Redux? #

It’s an option, but don’t jump to this first—fix the iteration and caching issues above first, as those are likely the root cause.

If after optimizing you still see performance hits (or if you need this data globally accessible across many components), syncing to Redux can help reduce repeated Realm reads. Here’s how to approach it:

• Set up a Redux slice to hold the units data.
• Listen for Realm change events on the Units collection, and dispatch actions to update Redux whenever the data changes.
• Have your Picker pull from Redux instead of Realm directly.

That said, this adds complexity (you have to keep Realm and Redux in sync), so only do it if the performance gain justifies the extra code.

Other Quick Checks #

• Verify that your Realm schema for Units is optimized—make sure id and shortName are indexed if you’re querying or accessing them frequently.
• If this is React Native, check if the Picker component itself is causing delays (try swapping it with a simple list of buttons temporarily to isolate the issue).

内容的提问来源于stack exchange，提问作者Shumuu