CODEWITHSUNDEEP
reactjsreact-nativereact-hooks
John Stuart
John Stuart

Reputation: 1150

React native screens not re-rendering when custom hook state got changed

I am using a custom hook in app purchases.

const useInAppPurchase = () => {
  const context = useContext(AuthGlobal)

  const [isFullAppPurchased, setIsFullAppPurchased] = useState(false)

  useEffect(() => {
    console.log(`InAppPurchase useEffect is called`)

    getProductsIAP()

    return async () => {
      try {
        await disconnectAsync()
      } catch (error) {}
    }
  }, [])

  ....
}

When I used this hook at AccountScreen (where I do the purchase) Account screen is getting re-rendered once the payment is done.

i.e. isFullAppPurchased is changing from false -> true

const AccountScreen = (props) => {
  const width = useWindowDimensions().width

  const {
    isFullAppPurchased,
  } = useInAppPurchase()

  return (
    // value is true after the purchase
    <Text>{isFullAppPurchased}</Text>
  )
}

But I am using the same hook in CategoryList screen and after the payment is done when I navigate to the CategoryList screen, The values (isFullAppPurchased) is not updated (still false). But when I do the re-rendering manually then I get isFullAppPurchased as true.

const CategoryList = (props) => {
  const navigation = useNavigation()
  const { isFullAppPurchased } = useInAppPurchase()
   
  return (
    // still value is false
    <Text>{isFullAppPurchased}</Text>
  )
}

What is the reason for this behaviour ? How should I re-render CategoryList screen once the payment is done ?

Thank you.

Upvotes: 0

Views: 175

Answers (1)

Aleksandr Smyshliaev
Aleksandr Smyshliaev

Reputation: 420

I see hook make API request only on mount, if whole parent component didn't unmount and rendered a new, value of hook stays same. E.g. dependencies array is empty - [] so hook doesn't request data again.

Probably better idea is to pass isFullAppPurchased via context or redux from top level. And put state and function to update that state in same place.

Upvotes: 1

Related Questions