React Context API vs Props & When to Use What

avatar
May 04, 2023 · Article · 5 min, 1065 words

When developing React applications, developers often need to pass data between components. There are two main ways to achieve this in React: using the Context API or passing data via props. In this article, we'll explore the differences between these two approaches and discuss when it's appropriate to use each one.

We will cover shortly about Props and Context API, if you like to know more details on Props you can check my React Props and State and the Difference Between Them & for Context API How to Use the React Context API in Your Projects.

Table of Contents

  1. What is the Context API?
  2. What are Props?
  3. Context API vs Props
  4. When to Use What

What is the Context API?

The Context API is a feature of React that allows data to be passed down the component tree without explicitly passing it as props. With the Context API, developers can create a context object that holds data and then pass that object to any component that needs it. The context object is made available to all child components of the component that receives it, without having to pass it through each level of the component tree.

To create a context object in React, developers use the createContext function. They can then wrap the component that needs access to the context data with a Provider component, passing the context object as a prop. Any child component of the Provider can access the context data using the useContext hook.

Here is an example:

// creating a context object using the createContext function
const ThemeContext = createContext('light');

// wrapping our application and provide the theme to all child components
function ThemeProvider(props) {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {props.children}
    </ThemeContext.Provider>
  );
}


// child components accessing theme from Context API using useContext 
function Header() {
  const { theme } = useContext(ThemeContext);

  return (
    <header className={theme}>
      <h1>My App</h1>
    </header>
  );
}

function Body() {
  const { theme } = useContext(ThemeContext);

  return <div className={theme}>This is the body of my app.</div>;
}

function App() {
  return (
    <ThemeProvider>
      <Header />
      <Body />
    </ThemeProvider>
  );
}

First, we create a context object using the createContext function. We provide a default value of "light" for the theme in case a component tries to access the theme before it has been set.

Next, we create a provider component that will wrap our application and provide the theme to all child components:

The ThemeProvider component sets the initial state of the theme to "light" and provides a function called toggleTheme that can be used to switch between light and dark mode. It wraps its child components in the ThemeContext.Provider, passing the theme and the toggleTheme function as values.

And last we use useContext hook to access the theme data.

What are Props?

Props, short for properties, are a way of passing data from a parent component to a child component in React. When a parent component renders a child component, it can pass data to the child component by specifying attributes on the child component in the JSX code. The child component can then access the data through its props object.

Props are immutable, meaning that the child component cannot modify the data that it receives from the parent. If the child component needs to modify the data, it can do so by calling a function that the parent component passes as a prop.

Here is an example:

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function App() {
  return <Greeting name="John" />;
}

In this example, the parent component App passes the user's name as a prop to the child component Greeting. The Greeting component receives the name as a prop and uses it to display a greeting message.

Context API vs Props

Here is an sort overview on between them:

 Context APIProps
PurposeShare data between components without prop drillingPass data from parent component to child component
Data flowTop-downTop-down or Bottom-up
Number of componentsIdeal for sharing data between many componentsIdeal for passing data between parent-child components
Code readabilityReduces code verbosity by eliminating prop drillingCan lead to verbose code when passing props down the component tree
PerformanceCan lead to performance issues if used excessivelyEfficient for passing data between parent-child components
State managementCan be used for managing state in a single placeEach component manages its own state

When to Use What

Props are ideal for passing simple data between parent and child components, while the Context API is useful for sharing data that needs to be accessed by multiple components or when the data is dynamic and subject to change frequently. The choice between the Context API and props ultimately depends on the complexity of the application and the nature of the data being passed.

Comments

No comments yet…