Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Hooks | Common Principles
course content

Course Content

Foundations of React Native

HooksHooks

What about hooks in React Native?

In our previous discussion, we delved into the useState hook, which functions similarly to its counterpart in React. This similarity arises because hooks are an integral part of the React library, and since React Native is built upon React, it naturally supports these hooks.

When developing with React Native, we can leverage hooks in much the same way as we do in React, using them for managing state, effects, context, and other aspects of components.

Let's review some React hooks:

useEffect

  • Purpose: useEffect is used to perform side effects;
  • Usage: Fetching data from an API, subscribing to external events, updating document title, or any other side effects that need to occur after render;
  • Syntax:

More on useEffect

useContext

  • Purpose: useContext allows functional components to consume context values that were created using the createContext API;
  • Usage: Accessing global state or data across multiple components without prop drilling;
  • Syntax:

More on useContext

useMemo

  • Purpose: useMemo memoizes the result of a function call instead of the function itself;
  • Usage: Memoizing expensive computations or calculations to optimize performance;
  • Syntax:

More on useMemo

useRef

  • Purpose: useRef creates a mutable ref object that persists for the entire lifetime of the component. It's useful for accessing DOM nodes or storing mutable values that won't trigger re-renders;
  • Usage: Accessing and modifying DOM elements, keeping track of previous values without triggering re-renders, or persisting values across renders;
  • Syntax:

More on useRef

Everything was clear?

Section 3. Chapter 7
course content

Course Content

Foundations of React Native

HooksHooks

What about hooks in React Native?

In our previous discussion, we delved into the useState hook, which functions similarly to its counterpart in React. This similarity arises because hooks are an integral part of the React library, and since React Native is built upon React, it naturally supports these hooks.

When developing with React Native, we can leverage hooks in much the same way as we do in React, using them for managing state, effects, context, and other aspects of components.

Let's review some React hooks:

useEffect

  • Purpose: useEffect is used to perform side effects;
  • Usage: Fetching data from an API, subscribing to external events, updating document title, or any other side effects that need to occur after render;
  • Syntax:

More on useEffect

useContext

  • Purpose: useContext allows functional components to consume context values that were created using the createContext API;
  • Usage: Accessing global state or data across multiple components without prop drilling;
  • Syntax:

More on useContext

useMemo

  • Purpose: useMemo memoizes the result of a function call instead of the function itself;
  • Usage: Memoizing expensive computations or calculations to optimize performance;
  • Syntax:

More on useMemo

useRef

  • Purpose: useRef creates a mutable ref object that persists for the entire lifetime of the component. It's useful for accessing DOM nodes or storing mutable values that won't trigger re-renders;
  • Usage: Accessing and modifying DOM elements, keeping track of previous values without triggering re-renders, or persisting values across renders;
  • Syntax:

More on useRef

Everything was clear?

Section 3. Chapter 7
some-alt