Skip to content

fix: avoid shared value reads during render #662

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 28, 2024
Merged

fix: avoid shared value reads during render #662

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 10 additions & 4 deletions src/components/KeyboardAvoidingView/hooks.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,20 @@
import { useState } from "react";
import { useSharedValue } from "react-native-reanimated";

import { useKeyboardContext } from "../../context";
import { useKeyboardHandler } from "../../hooks";

export const useKeyboardAnimation = () => {
const { reanimated } = useKeyboardContext();
const heightWhenOpened = useSharedValue(-reanimated.height.value);
const height = useSharedValue(-reanimated.height.value);
const progress = useSharedValue(reanimated.progress.value);
const isClosed = useSharedValue(reanimated.progress.value === 0);

// calculate it only once on mount, to avoid `SharedValue` reads during a render
const [initialHeight] = useState(() => -reanimated.height.value);
const [initialProgress] = useState(() => reanimated.progress.value);
Comment on lines +11 to +12
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hm, they already use useState under the hood https://github.com/software-mansion/react-native-reanimated/blob/main/packages/react-native-reanimated/src/hook/useSharedValue.ts#L19 and if we have a look at the react docs

initialState: The value you want the state to be initially. It can be a value of any type, but there is a special behavior for functions. This argument is ignored after the initial render.

So, are you sure that you need these changes?

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, but new REA 3.16 will complain if you use .value during render. So you should void the usage of .value during re-render (but you can use for the first render).

I had several approaches:

  1. To use useMemo to calculate initial values for reanimated.*.value - but this is not reliable, because useMemo in future may throw cache away and re-calculate memoization.

  2. To use useState to calculate initial value.

  3. to create own useLazySharedValue hook with next implementation:

export function useSharedValue<Value>(initialValue: () => Value): SharedValue<Value> { // function instead of value
  const [mutable] = useState(() => makeMutable(initialValue()));
  useEffect(() => {
    return () => {
      cancelAnimation(mutable);
    };
  }, [mutable]);
  return mutable;
}

If you have more ideas @IvanIhnatsiuk then I'll be happy to consider your thoughts 😊

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hm, looks like it would be better to implement your own hook and remove it once people migrate to REA 3.16

Also, it helps to remove code duplication like this:

 const [initialHeight] = useState(() => -reanimated.height.value);
 const heightWhenOpened = useSharedValue(initialHeight);

and replace it with your own hook

 const heightWhenOpened = useLazySharedValue(() => -reanimated.height.value);

But anyway, it's up to you 🙂

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well, there are few reasons why I don't want to implement my hook:

  • makeMutable is publicly exported, but I don't want to copy internal implementation of useSharedValue (even though this hook is a very simple). If it changes over time I'll have to replicate these changes in this package as well.
  • we have kind of code duplication, but thus we extract values and then reuse the value (I'm not sure if reading SharedValue on first render is an expensive operation or not, but I saw somewhere that it adds an overhead - but maybe mistaken).

This is why I think useState approach is better. anyway, it's pretty minor code modification - in future we may revisit this code 🙂


const heightWhenOpened = useSharedValue(initialHeight);
const height = useSharedValue(initialHeight);
const progress = useSharedValue(initialProgress);
const isClosed = useSharedValue(initialProgress === 0);

useKeyboardHandler(
{
Expand Down