diff --git a/src/components/APIConfig.js b/src/components/APIConfig.js
index e31683c..de6eb1a 100644
--- a/src/components/APIConfig.js
+++ b/src/components/APIConfig.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { useComponentState, useActions } from 'm/store';
+import { useStoreState, useActions } from 'm/store';
 
 import Input from 'c/Input';
 import Button from 'c/Button';
@@ -13,7 +13,7 @@ const mapStateToProps = s => ({
 });
 
 function APIConfig2() {
-  const { apiConfig } = useComponentState(mapStateToProps);
+  const { apiConfig } = useStoreState(mapStateToProps);
   const [hostname, setHostname] = useState(apiConfig.hostname);
   const [port, setPort] = useState(apiConfig.port);
   const [secret, setSecret] = useState(apiConfig.secret);
diff --git a/src/components/APIDiscovery.js b/src/components/APIDiscovery.js
index c94719f..30fa9af 100644
--- a/src/components/APIDiscovery.js
+++ b/src/components/APIDiscovery.js
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { useActions, useComponentState } from 'm/store';
+import { useActions, useStoreState } from 'm/store';
 
 import Modal from 'c/Modal';
 import APIConfig from 'c/APIConfig';
@@ -19,7 +19,7 @@ const actions = {
 };
 
 export default function APIDiscovery() {
-  const { modals } = useComponentState(mapStateToProps);
+  const { modals } = useStoreState(mapStateToProps);
   const { closeModal, fetchConfigs } = useActions(actions);
   useEffect(() => {
     fetchConfigs();
diff --git a/src/components/Config.js b/src/components/Config.js
index e72d5f9..e1a7af3 100644
--- a/src/components/Config.js
+++ b/src/components/Config.js
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { useComponentState, useActions } from 'm/store';
+import { useStoreState, useActions } from 'm/store';
 
 import { getConfigs, fetchConfigs, updateConfigs } from 'd/configs';
 
@@ -57,7 +57,7 @@ const mapStateToProps = s => ({ configs: getConfigs(s) });
 
 export default function ConfigContainer() {
   const { fetchConfigs } = useActions(actions);
-  const { configs } = useComponentState(mapStateToProps);
+  const { configs } = useStoreState(mapStateToProps);
   useEffect(() => {
     fetchConfigs();
   }, []);
diff --git a/src/components/Logs.js b/src/components/Logs.js
index 58638ae..2b6a143 100644
--- a/src/components/Logs.js
+++ b/src/components/Logs.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { useComponentState } from 'm/store';
+import { useStoreState } from 'm/store';
 import { getClashAPIConfig } from 'd/app';
 
 import Icon from 'c/Icon';
@@ -45,7 +45,7 @@ LogLine.propTypes = {
 
 export default function Logs() {
   const [logs, setLogs] = useState([]);
-  const { hostname, port, secret } = useComponentState(getClashAPIConfig);
+  const { hostname, port, secret } = useStoreState(getClashAPIConfig);
 
   useEffect(
     () => {
diff --git a/src/components/Proxies.js b/src/components/Proxies.js
index d3904da..b677dbb 100644
--- a/src/components/Proxies.js
+++ b/src/components/Proxies.js
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { useActions, useComponentState } from 'm/store';
+import { useActions, useStoreState } from 'm/store';
 
 import ContentHeader from 'c/ContentHeader';
 import ProxyGroup from 'c/ProxyGroup';
@@ -29,7 +29,7 @@ export default function Proxies() {
   useEffect(() => {
     fetchProxies();
   }, []);
-  const { groupNames } = useComponentState(mapStateToProps);
+  const { groupNames } = useStoreState(mapStateToProps);
 
   return (
     <div>
diff --git a/src/components/Proxy.js b/src/components/Proxy.js
index 12f0646..3e248cd 100644
--- a/src/components/Proxy.js
+++ b/src/components/Proxy.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useComponentState } from 'm/store';
+import { useStoreState } from 'm/store';
 
 import Icon from 'c/Icon';
 import ProxyLatency from 'c/ProxyLatency';
@@ -41,7 +41,7 @@ const mapStateToProps = s => {
 };
 
 function Proxy({ now, name }) {
-  const { proxies, delay } = useComponentState(mapStateToProps);
+  const { proxies, delay } = useStoreState(mapStateToProps);
 
   // const { name, proxies, delay, now } = this.props;
   const latency = delay[name];
diff --git a/src/components/ProxyGroup.js b/src/components/ProxyGroup.js
index d6b3c99..91b9717 100644
--- a/src/components/ProxyGroup.js
+++ b/src/components/ProxyGroup.js
@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { useActions, useComponentState } from 'm/store';
+import { useActions, useStoreState } from 'm/store';
 
 import Proxy from 'c/Proxy';
 
@@ -15,7 +15,7 @@ const mapStateToProps = s => ({
 // should move this to sth like constants.js
 // const userProxyTypes = ['Shadowsocks', 'Vmess', 'Socks5'];
 export default function ProxyGroup2({ name }) {
-  const { proxies } = useComponentState(mapStateToProps);
+  const { proxies } = useStoreState(mapStateToProps);
   const actions = useActions({ switchProxy });
   const group = proxies[name];
   const { all, now } = group;
diff --git a/src/components/TrafficChart.js b/src/components/TrafficChart.js
index e0c1b26..f14e17f 100644
--- a/src/components/TrafficChart.js
+++ b/src/components/TrafficChart.js
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import prettyBytes from 'm/pretty-bytes';
 import { fetchData } from '../api/traffic';
 import { unstable_createResource as createResource } from 'react-cache';
-import { useComponentState } from 'm/store';
+import { useStoreState } from 'm/store';
 import { getClashAPIConfig, getTheme } from 'd/app';
 
 // const delay = ms => new Promise(r => setTimeout(r, ms));
@@ -139,8 +139,8 @@ const chartWrapperStyle = {
 
 export default function TrafficChart() {
   const Chart = chartJSResource.read();
-  const { hostname, port, secret } = useComponentState(getClashAPIConfig);
-  const theme = useComponentState(getTheme);
+  const { hostname, port, secret } = useStoreState(getClashAPIConfig);
+  const theme = useStoreState(getTheme);
 
   useEffect(
     () => {
diff --git a/src/components/TrafficNow.js b/src/components/TrafficNow.js
index 09fa43f..c24abc1 100644
--- a/src/components/TrafficNow.js
+++ b/src/components/TrafficNow.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import prettyBytes from 'm/pretty-bytes';
 
-import { useComponentState } from 'm/store';
+import { useStoreState } from 'm/store';
 import { getClashAPIConfig } from 'd/app';
 import { fetchData } from '../api/traffic';
 
@@ -25,7 +25,7 @@ export default function TrafficNow() {
 
 function useSpeed() {
   const [speed, setSpeed] = useState({ upStr: '0 B/s', downStr: '0 B/s' });
-  const { hostname, port, secret } = useComponentState(getClashAPIConfig);
+  const { hostname, port, secret } = useStoreState(getClashAPIConfig);
   useEffect(
     () => {
       return fetchData({
diff --git a/src/misc/store.js b/src/misc/store.js
index 6f1f8aa..c44396f 100644
--- a/src/misc/store.js
+++ b/src/misc/store.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import shallowEqual from './shallowEqual';
 
-export const StoreContext = createContext(null);
+const StoreContext = createContext(null);
 
 export function Provider({ store, children }) {
   return (
@@ -28,7 +28,7 @@ export function useActions(actions) {
   return bindActionCreators(a, dispatch);
 }
 
-export function useComponentState(selector) {
+export function useStoreState(selector) {
   const store = useStore();
   const initialMappedState = selector(store.getState());
   const [compState, setCompState] = useState(initialMappedState);