why theme from useTheme changes in every redraw?

[marianolc]

Hi! I'm actually creating a custom theme provider that creates themes based on the selection. The style function is:

const styles = (colors: Colors) =>
  StyleSheet.create({
    drawerText: {
      color: colors.grey2,
    },
  });

This is called in the main component like this:

  const { theme } = useTheme();
  const themedStyle = useMemo(() => {
    console.log('recreating themes again :(');
    return styles(theme.colors);
  }, [theme]);

The problem is that the useMemo executes in every single redraw of the component by unrelated reasons (ex. some state changed).

The weird thing is if I use theme.colors as the dependency this works as intended:

const { theme } = useTheme();
const themedStyle = useMemo(() => {
  console.log('this runs once!');
  return styles(theme.colors);
}, [theme.colors]);

Is there any reason for this? Shouldn't theme be always the same object unless I change the theme? What's the reason of the object change?

[arpitBhalla]

This issue has been fixed, would be available in next release.