RFC: Memoize style objects to prevent re-renders of memoized components

[levibuzolic]

Awesome work Jacek on a great library, I love the simple approach and it fits well with patterns I've used across a few apps already and I'm looking forward to seeing how it evolves.

I'd like to request a feature/open a discussion about how to better handle styles in a way that doesn't break memoization of components (ie. React.memo())

Problem

While integrating react-native-unistyles into a project we've noticed that styles break memoization (React.memo) when any dynamic features are used (ie. anything requiring useStyles()). This is because the useStyles hook returns a new style object on every render, which causes the memoized component to re-render every time.

It does however work as expected when using purely static styles because no internal manipulation is done to the passed-in style object.

This can be demonstrated by this Expo Snack. Where every press of the Re-render button triggers both dynamic style components to re-render.

User-land solution

To work around this issue we've been creating a separate static style object alongside our dynamic styles, or avoided passing styles entirely. (As demonstrated in the above Expo Snack)

// Dynamic styles, all unsafe to pass through to a memoized component
const stylesheet = createStyleSheet(({colors}) => ({
  item: {
    backgroundColor: colors.fg.primary,
  }
  text: {
    fontSize: 12,
  },
}));

// Static styles, safe to use in memoized components
const staticStyles = createStyleSheet({
  other: {
    borderRadius: 4,
  }
});

This means we haven't been able to get the full benefits of Unistyles in the few heavily optimised areas of our codebase.

Proposed solution (contents of this PR)

A few targetted uses of useMemo throughout the useStyles hook means that we can make styles memoizable by default, and only recompute them when either the screen size or the theme changes.

This has a trade-off of potentially increased memory usage, though at the same time would significantly reduce the amount of object transforms (nested parseStyle calls) on every render.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-native-unistyles-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 13, 2023 8:39am

[jpudysz]

Wow @levibuzolic , thank you a lot for this PR!

I need some time to test it, and I will get back to you (most likely tomorrow).

[jpudysz]

After the initial tests, I must say that this is an excellent PR. Thank you for delving into it. It will greatly improve the library!

[jpudysz]

remove unused useEffect and useRef

[jpudysz]

you don't need to pass sortedBreakpointEntries to the deps. It's computed only once, before user uses useStyles. Value will never change.

[efstathiosntonas]

theme needs to be passed to the deps array too otherwise theme won't be changed after user changes it

click for demo video

Screen.Recording.2023-10-13.at.08.56.25.mov

[levibuzolic]

Ah, of course. It looks like parsedStyles is actually what should be passed in here, that's the actual dependency which relies on theme and stylesheet.

[efstathiosntonas]

yeah you're 💯 right! Thanks @levibuzolic

[levibuzolic]

Thanks for catching those issues @jpudysz, should be sorted now. 👍

[jpudysz]

I will merge it and fix it in a separate PR as your timezone is 9h ahead 😅 .
Thank you @levibuzolic for the PR