diff --git a/src/components/Gitako.tsx b/src/components/Gitako.tsx
index 4088a27..28ace02 100644
--- a/src/components/Gitako.tsx
+++ b/src/components/Gitako.tsx
@@ -1,6 +1,6 @@
 import { raiseError } from 'analytics'
 import { SideBar } from 'components/SideBar'
-import { ConfigsContextWrapper } from 'containers/ConfigsContext'
+import { ConfigsContext, ConfigsContextWrapper } from 'containers/ConfigsContext'
 import * as React from 'react'
 
 export class Gitako extends React.PureComponent {
@@ -11,7 +11,9 @@ export class Gitako extends React.PureComponent {
   render() {
     return (
       <ConfigsContextWrapper>
-        <SideBar />
+        <ConfigsContext.Consumer>
+          {configContext => configContext && <SideBar configContext={configContext} />}
+        </ConfigsContext.Consumer>
       </ConfigsContextWrapper>
     )
   }
diff --git a/src/components/Resizable.tsx b/src/components/Resizable.tsx
index 2cba2fa..8a8fc0d 100644
--- a/src/components/Resizable.tsx
+++ b/src/components/Resizable.tsx
@@ -1,7 +1,6 @@
 import { HorizontalResizeHandler } from 'components/ResizeHandler'
 import { useConfigs } from 'containers/ConfigsContext'
 import * as React from 'react'
-import { configKeys } from 'utils/configHelper'
 import { cx } from 'utils/cx'
 import { bodySpacingClassName } from 'utils/DOMHelper'
 import * as features from 'utils/features'
@@ -34,7 +33,7 @@ export function Resizable({ baseSize, className, children }: React.PropsWithChil
 
   React.useEffect(() => {
     document.documentElement.style.setProperty('--gitako-width', size + 'px')
-    configContext.set({ [configKeys.sideBarWidth]: size })
+    configContext.set({ sideBarWidth: size })
   }, [size])
 
   useMediaStyleSheet(
diff --git a/src/containers/ConfigsContext.tsx b/src/containers/ConfigsContext.tsx
index 1be1551..9bfb22f 100644
--- a/src/containers/ConfigsContext.tsx
+++ b/src/containers/ConfigsContext.tsx
@@ -1,20 +1,22 @@
 import * as React from 'react'
-import { Config, getAll, setAll } from 'utils/configHelper'
+import * as configsHelper from 'utils/configHelper'
+import { Config } from 'utils/configHelper'
 
 type Props = {}
 
 type ContextShape = PartialValSet<Config>
+export type ConfigsContextShape = ContextShape
 
-const ConfigsContext = React.createContext<ContextShape | null>(null)
+export const ConfigsContext = React.createContext<ContextShape | null>(null)
 
 export function ConfigsContextWrapper(props: React.PropsWithChildren<Props>) {
   const [configs, setConfigs] = React.useState<Config | null>(null)
   React.useEffect(() => {
-    getAll().then(setConfigs)
+    configsHelper.get().then(setConfigs)
   }, [])
   const set = React.useCallback(
     () => (configs: Config) => {
-      setAll(configs)
+      configsHelper.set(configs)
       setConfigs(configs)
     },
     [setConfigs],
diff --git a/src/driver/core/SideBar.ts b/src/driver/core/SideBar.ts
index f3c797a..4695afb 100644
--- a/src/driver/core/SideBar.ts
+++ b/src/driver/core/SideBar.ts
@@ -1,5 +1,5 @@
+import { ConfigsContextShape } from 'containers/ConfigsContext'
 import { GetCreatedMethod, MethodCreator } from 'driver/connect'
-import * as configHelper from 'utils/configHelper'
 import { Config } from 'utils/configHelper'
 import * as DOMHelper from 'utils/DOMHelper'
 import * as GitHubHelper from 'utils/GitHubHelper'
@@ -7,7 +7,9 @@ import { MetaData, TreeData } from 'utils/GitHubHelper'
 import * as keyHelper from 'utils/keyHelper'
 import * as URLHelper from 'utils/URLHelper'
 
-export type Props = {}
+export type Props = {
+  configContext: ConfigsContextShape
+}
 
 export type ConnectorState = {
   // error message
@@ -77,6 +79,7 @@ export const init: BoundMethodCreator = dispatch => async () => {
     }
     metaData.branchName = detectedBranchName || 'master'
     dispatch.call(setMetaData, metaData)
+    const [, { configContext }] = dispatch.get()
     const {
       sideBarWidth,
       access_token: accessToken,
@@ -85,7 +88,7 @@ export const init: BoundMethodCreator = dispatch => async () => {
       copyFileButton,
       copySnippetButton,
       intelligentToggle,
-    } = await configHelper.getAll()
+    } = configContext.val
     DOMHelper.decorateGitHubPageContent({ copyFileButton, copySnippetButton })
     dispatch.set({
       baseSize: sideBarWidth,
@@ -258,7 +261,8 @@ export const setCopySnippet: BoundMethodCreator<
 export const setIntelligentToggle: BoundMethodCreator<
   [ConnectorState['intelligentToggle']]
 > = dispatch => intelligentToggle => {
-  configHelper.setOne(configHelper.configKeys.intelligentToggle, intelligentToggle)
+  const [, { configContext }] = dispatch.get()
+  configContext.set({ intelligentToggle })
   dispatch.set({ intelligentToggle })
 }
 
diff --git a/src/utils/configHelper.ts b/src/utils/configHelper.ts
index f00dae7..470a005 100644
--- a/src/utils/configHelper.ts
+++ b/src/utils/configHelper.ts
@@ -43,20 +43,10 @@ function applyDefaultConfigs(configs: Config) {
   )
 }
 
-export async function getAll(): Promise<Config> {
+export async function get(): Promise<Config> {
   return applyDefaultConfigs(await storageHelper.get(configKeyArray))
 }
 
-export async function getOne(key: configKeys) {
-  return (await getAll())[key]
-}
-
-export async function setAll(partialConfig: Partial<Config>) {
+export async function set(partialConfig: Partial<Config>) {
   return await storageHelper.set(partialConfig)
 }
-
-export async function setOne(key: configKeys, value: any) {
-  return await setAll({
-    [key]: value,
-  })
-}
diff --git a/src/utils/hooks.ts b/src/utils/hooks.ts
index 578ae1f..258481d 100644
--- a/src/utils/hooks.ts
+++ b/src/utils/hooks.ts
@@ -47,3 +47,10 @@ export function usePrevious<T>(newValue: T) {
   })
   return previousRef.current
 }
+
+export function useStates<S>(
+  initialState: S | (() => S),
+): { val: S; set: React.Dispatch<React.SetStateAction<S>> } {
+  const [val, set] = React.useState(initialState)
+  return { val, set }
+}