# Let's Connect the Garden! - Coding with useContext
In our previous blog, we explored **useContext** and how it allows water (data) to flow seamlessly through the entire tree without losing its essence.
However, when I first examined code snippets like these, I often struggled to connect the dots and truly grasp the flow. So, in this article, let’s go a step further — from concept to code — and break down how it all works in practice.
Since **useContext** is all about accessing data, we’ll begin by setting up some example data. And because our analogy revolves around a tree, our dataset will be… a tree itself! At the top level, we’ll have a **branch** as the first key. Its value will be an object containing an **id** and a **leaf**. The **leaf** itself will hold another object, which finally expands into a **flower**:
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1758015799114/9cabc69e-94ae-4817-9ee0-2574c8f5181e.png align="center")
Now that we have our tree structure, the next step is to set up some React components and files that we’ll use throughout the example. To keep things organized, we’ll create two folders: **components** and **context**. Alongside these, we’ll also have our main files — **App.js** and **index.js** — to tie everything together.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1758016099781/7e412c42-6d2a-453a-ad7e-8b69ddb50921.png align="center")
First, let’s establish the context. This would be our store, where all the variables of functions would be declared, and would be accessible from!
1. ### 1\. Importing the essentials
First, we’ll bring in the React libraries we need — `createContext`, `useContext`, and `useState`:
```plaintext
import React, { createContext, useContext, useState } from "react";
```
2. ### Declaring the context and initial tree
Next, we declare our **context** and an initial tree structure (from the data model we defined earlier):
```plaintext
const TreeContext = createContext();
const initialTree = {
branch: {
id: 1,
leaf: {
flower: "🌸"
}
}
};
```
### 3\. Creating the TreeProvider
Now comes the core piece: the **TreeProvider**.
Its role is to ensure that our data (the tree) is accessible throughout the React component hierarchy. In other words, it’s the “water source” that supplies data everywhere. Inside our `TreeProvider`, we use the `useState` hook to manage the tree’s data. This allows us to not only store the initial tree but also update it dynamically whenever needed. By wrapping our children with `TreeContext.Provider` and passing the `tree` (along with any helper functions like `addBranch`) into its `value`, we make the data available to every component within this provider’s scope. In short, the provider acts as the central source, ensuring that all child components can seamlessly access and interact with the tree without the hassle of prop drilling.
```plaintext
export const TreeProvider = ({ children }) => {
const [tree, setTree] = useState(initialTree);
// Example function to add a branch (we’ll define this further later)
const addBranch = (newBranch) => {
setTree({ ...tree, ...newBranch });
};
return (
{children}
);
};
```
### 4\. Making the context reusable
To simplify context usage, we’ll create a custom hook that lets any component access our tree directly:
```plaintext
export const useTree = () => useContext(TreeContext);
```
With this setup, our tree context is now **ready to be shared across the app**.
For starters, we set up an App.js, from where the Provider will wrap our first component, <Tree/>
```plaintext
import React from "react";
import { TreeProvider } from "./context/TreeContext";
import Branch from "./components/Branch";
const App = () => {
return (
);
};
export default App;
```
Further, we go deeper in our tree and use our recently created context inside the <Branch/> component.
```plaintext
import React from "react";
import { useTree } from "../context/TreeContext";
import Leaf from "./Leaf";
const Branch = () => {
const { tree, addBranch } = useTree();
const branches = tree.branches;
return (
);
};
export default Branch;
```
This is a simple execution of our **Branch Component** — let’s break down what’s happening here:
1. **Importing the context** `import { useTree } from "../context/TreeContext";`
We bring in our custom hook, `useTree`, which gives us direct access to the context we created earlier.
2. **Extracting values from context** `const { tree, addBranch } = useTree();`
Here, we deconstruct the context to get both the `tree` data and the `addBranch` function.
3. **Adding a new branch** ``
This button will trigger the `addBranch` function whenever clicked, allowing us to dynamically grow our tree (we’ll explore this in detail later).
4. **Using the tree data**
Finally, we can access the `tree` object to pull out its branches, leaves, and IDs for rendering inside our component.
Finally, the Leaf and Flower components are nested inside the Branch components.
```plaintext
import React from "react";
import Flower from "./Flower";
const Leaf = ({ leaf }) => {
return (
);
};
export default Flower;
```
You might be wondering — why did we use **props** for passing down the leaf and flower instead of putting them into the context? To answer this, let’s return to our **tree analogy**.
Water is essential for every part of the tree, so it flows uniformly throughout — just like our context data. But what about byproducts of the soil that are only useful to a specific part, say the stem? We wouldn’t sprinkle those byproducts everywhere because not all parts need them, and even if we tried, extracting them would be unnecessarily complicated.
Similarly, in React, not all data belongs in context. Some values (like a specific leaf or flower) are only relevant to the immediate child component. In such cases, it’s simpler and cleaner to pass them as **props** rather than pushing everything through context.
That’s all for today! We’ve taken our first big steps into coding with `useContext` and building our tree. Next time, we’ll add a fun little function to actually make our tree grow. Until then — keep your roots strong and your branches reaching out!!