DropZone context is lost between parent and child components during render

[haidv1992]

I'm facing an issue where the context from DropZoneProvider is not being properly passed down to the DropZoneRender component. Despite correctly wrapping the DropZone components with DropZoneProvider, the context becomes null or undefined at certain child components (specifically within Columns and Section), while it remains intact at higher levels, such as the Root component.

Steps to Reproduce:

1. Wrap a DropZone inside a DropZoneProvider within the Root component.
2. Use DropZone inside Columns (which is a part of the rendered content) with zones like column-0, column-1, etc.
3. During render, the context logs correctly at the Root level but turns null or undefined inside DropZoneRender at the Columns level.

Expected Behavior:
The context from DropZoneProvider should be consistently available across all child components, especially inside DropZoneRender, without becoming null.

Actual Behavior:
The context is available at the Root component but turns null inside DropZoneRender when rendering specific columns inside Columns. The issue persists even after memoizing DropZoneProvider to reduce unnecessary re-renders.

Logs:

1. At the Root level, the context is logged correctly:

   {
     "data": { ... },
     "config": { ... },
     "mode": "render"
   }

2. However, inside DropZoneRender, the context becomes:

   {
     "ctx": null
   }

Things I have tried:

• Memoizing DropZoneProvider using React.memo to prevent unnecessary re-renders.
• Logging context values in every DropZoneProvider to check if they are being re-mounted or unmounted. (They are not.)
• Ensuring that the key of each DropZoneProvider is stable and unique.

Code Example:

Here is a simplified version of the component structure:

<DropZoneProvider value={contextValue}>
  <Root>
    <DropZone zone={rootDroppableId} />
  </Root>
</DropZoneProvider>

<DropZoneProvider key={areaId} value={contextValue}>
  <Section>
    <DropZone zone={`column-0`} />
  </Section>
</DropZoneProvider>

Additional Info:

• This issue occurs in one of my projects, but the same setup works fine in another project where DropZoneProvider passes context correctly.
• I'm using React 18.3.0, and the issue persists even after updating dependencies.

Could this be related to React's context propagation or a potential conflict with useMemo/useState within DropZoneProvider? Any guidance or suggestions from the community would be greatly appreciated!

---

Environment:

• React version: 18.3.0
• Context API: React.createContext
• Related Libraries: @measured/dnd, custom components (DropZone, Columns, etc.)
  i use version v0.16.1 and use demo to run

---

Feel free to tweak the details to better match your exact scenario!