From 57579e61509bd94aa850e104443a1f92e680f52b Mon Sep 17 00:00:00 2001
From: bobstrange <bob.1983.g@gmail.com>
Date: Fri, 31 Mar 2023 23:28:16 +0900
Subject: [PATCH] chore: use reduceRight to refactor nested providers

---
 .../FactoryPatternWithCustomHookExample.tsx      | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/react/micro-state-management-with-react-hooks/src/components/FactoryPatternWithCustomHookExample.tsx b/react/micro-state-management-with-react-hooks/src/components/FactoryPatternWithCustomHookExample.tsx
index 479484b..f1b5729 100644
--- a/react/micro-state-management-with-react-hooks/src/components/FactoryPatternWithCustomHookExample.tsx
+++ b/react/micro-state-management-with-react-hooks/src/components/FactoryPatternWithCustomHookExample.tsx
@@ -1,4 +1,4 @@
-import { createContext, ReactNode, useContext, useState } from 'react'
+import { createContext, createElement, ReactNode, useContext, useState } from 'react'
 
 const createStateContext = <Value, State>(useValue: (init?: Value) => State) => {
   const StateContext = createContext<State | null>(null)
@@ -58,14 +58,18 @@ const Parent = () => {
 }
 
 export const FactoryPatternWithCustomHookExample = () => {
+  const providers = [
+    [Count1Provider, { initialValue: 0 }],
+    [Count2Provider, { initialValue: 0 }],
+  ] as const
+
   return (
     <>
       <h2>Factory pattern with custom hook example</h2>
-      <Count1Provider initialValue={0}>
-        <Count2Provider initialValue={0}>
-          <Parent />
-        </Count2Provider>
-      </Count1Provider>
+      {providers.reduceRight(
+        (children, [Component, props]) => createElement(Component, props, children),
+        <Parent />
+      )}
     </>
   )
 }