useEffect

    We use the useEffect hook to call functions with side effects within our components.

    API

    The useEffect hook takes 2 arguments:

    • callback - a function with side effects
    • dependencies - an optional array containing dependency values

    When our component function runs, the callback will be called if any dependencies have changed since the last time the component function ran.

    Example

    In this example, we'll log to the console any time the count is a multiple of 3. The callback is called every time the countEvery3 changes, since countEvery3 is listed as a dependency.

    Undefined or empty dependency array

    If the dependency array is empty or undefined, useEffect will have a different behavior.

    • [] - the callback is called only once, right after the component renders for the first time
    • undefined - the callback is called on every component render (every time the component function runs)

    undefined dependencies

    Here the dependency array is undefined, so our callback will run every time our component function runs, e.g. any time we click the button and useState tells our component to re-run.

    Empty dependencies

    Here the dependency array is empty, so our callback will only run once (and therefore only log one time).

    Want to learn React Native in-depth?

    If you like React Native Express, you'll love my new book, Fullstack React Native: The complete guide to React Native! Throughout the book, we'll build 7 full apps, covering complex topics like navigation, gestures, and native modules. We don't assume any knowledge of React or newer JavaScript language features, so you can dive right in regardless of your experience level. The book comes in PDF, EPUB and MOBI formats.