diff --git a/src/components/Login.js b/src/components/Login.js
index fa1fa2a..43c93be 100644
--- a/src/components/Login.js
+++ b/src/components/Login.js
@@ -12,16 +12,22 @@ import Icon from 'react-mdl/lib/Icon';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import moment from '@/utils/moment';
 import Storage from '@/utils/Storage';
-import withRef from '@/utils/withRef';
 
-class Login extends React.Component {
+@injectIntl
+@CSSModules(styles, { allowMultiple: true })
+export default class Login extends React.Component {
   static propTypes = {
+    onRef: PropTypes.func,
     onLogoutClick: PropTypes.func,
     onLogoutClick: PropTypes.func,
     isSubmitting: PropTypes.bool,
     authData: PropTypes.object
   };
 
+  static defaultProps = {
+    onRef() {}
+  };
+
   constructor(props) {
     super(props);
 
@@ -36,6 +42,7 @@ class Login extends React.Component {
   }
 
   componentDidMount() {
+    this.props.onRef(this);
     const authData = Storage.get('auth');
     this.setState({
       authData
@@ -161,9 +168,3 @@ class Login extends React.Component {
     );
   }
 }
-
-export default withRef(
-  // eslint-disable-next-line babel/new-cap
-  CSSModules(Login, styles, { allowMultiple: true }),
-  injectIntl
-);
diff --git a/src/containers/IllustContainer.js b/src/containers/IllustContainer.js
index 6d6c02c..b263aa6 100644
--- a/src/containers/IllustContainer.js
+++ b/src/containers/IllustContainer.js
@@ -97,7 +97,7 @@ export default class IllustContainer extends React.Component {
   onFavouriteClick(event) {
     const authData = Storage.get('auth');
     if (authData === null || authData.expires_at < moment().unix()) {
-      return this.loginRef.getRef().open();
+      return this.loginRef.open();
     }
     const target = event.target,
       body = document.body;
@@ -307,7 +307,7 @@ export default class IllustContainer extends React.Component {
               <Loading isHidden={!this.props.illust.isFetchingComments} />
             </div>
           </InfiniteScroll>
-          <LoginContainer ref={ref => (this.loginRef = ref)} />
+          <LoginContainer onRef={ref => (this.loginRef = ref)} />
           <Alert ref={ref => (this.alertRef = ref)} />
         </div>
       );
diff --git a/src/containers/LoginContainer.js b/src/containers/LoginContainer.js
index d3b1885..eb6a141 100644
--- a/src/containers/LoginContainer.js
+++ b/src/containers/LoginContainer.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { injectIntl } from 'react-intl';
 
 import Alert from '@/components/Alert';
@@ -6,11 +7,19 @@ import Login from '@/components/Login';
 import cachedFetch from '@/utils/cachedFetch';
 import moment from '@/utils/moment';
 import Storage from '@/utils/Storage';
-import withRef from '@/utils/withRef';
 
 import config from '@/config';
 
-class LoginContainer extends React.Component {
+@injectIntl
+export default class LoginContainer extends React.Component {
+  static propTypes = {
+    onRef: PropTypes.func
+  };
+
+  static defaultProps = {
+    onRef() {}
+  };
+
   constructor(props) {
     super(props);
 
@@ -21,6 +30,7 @@ class LoginContainer extends React.Component {
   }
 
   componentDidMount() {
+    this.props.onRef(this);
     const authData = Storage.get('auth');
     this.setState({
       authData
@@ -35,25 +45,22 @@ class LoginContainer extends React.Component {
   @autobind
   onKeydown(event) {
     if (event.keyCode === 27) {
-      this.loginRef.getRef().close();
+      this.loginRef.close();
     }
 
-    if (
-      this.loginRef.getRef().state.isHidden === false &&
-      event.keyCode === 13
-    ) {
+    if (this.loginRef.state.isHidden === false && event.keyCode === 13) {
       this.onLoginClick();
     }
   }
 
   @autobind
   open() {
-    this.loginRef.getRef().open();
+    this.loginRef.open();
   }
 
   @autobind
   close() {
-    this.loginRef.getRef().close();
+    this.loginRef.close();
   }
 
   @autobind
@@ -70,8 +77,8 @@ class LoginContainer extends React.Component {
       );
     }
 
-    const username = this.loginRef.getRef().getUsername();
-    const password = this.loginRef.getRef().getPassword();
+    const username = this.loginRef.getUsername();
+    const password = this.loginRef.getPassword();
 
     if (username === '') {
       return this.alertRef.setContent(
@@ -115,8 +122,8 @@ class LoginContainer extends React.Component {
           });
           setTimeout(() => {
             this.close();
-            this.loginRef.getRef().setUsername('');
-            this.loginRef.getRef().setPassword('');
+            this.loginRef.setUsername('');
+            this.loginRef.setPassword('');
           }, 1500);
         } else {
           this.alertRef.setContent(data.message);
@@ -149,7 +156,7 @@ class LoginContainer extends React.Component {
     return (
       <div>
         <Login
-          ref={ref => (this.loginRef = ref)}
+          onRef={ref => (this.loginRef = ref)}
           onLoginClick={this.onLoginClick}
           onLogoutClick={this.onLogoutClick}
           isSubmitting={this.state.isSubmitting}
@@ -160,5 +167,3 @@ class LoginContainer extends React.Component {
     );
   }
 }
-
-export default withRef(LoginContainer, injectIntl);
diff --git a/src/utils/withRef.js b/src/utils/withRef.js
deleted file mode 100644
index db37799..0000000
--- a/src/utils/withRef.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import React from 'react';
-import shortid from 'shortid';
-
-export function refComponentHoc(ChildComponent, refer) {
-  return class RefComponent extends React.Component {
-    constructor(props) {
-      super(props);
-    }
-
-    @autobind
-    setRef(childComponentInstance) {
-      if (refer) {
-        refer.ref = childComponentInstance;
-      }
-      this[ChildComponent.name] = childComponentInstance;
-    }
-
-    render() {
-      const props = { ...this.props, ref: this.setRef };
-      return <ChildComponent {...props} />;
-    }
-  };
-}
-
-export default function withRef(wrappedComponent, ...decorators) {
-  const refer = new Proxy(
-    { id: '' },
-    {
-      get(target, key) {
-        if (key === 'id') {
-          const value = target.id;
-          target.id = '';
-          return value;
-        }
-        return target[key];
-      },
-      set(target, key, value) {
-        key = shortid.generate();
-        target.id = key;
-        target[key] = value;
-        return true;
-      }
-    }
-  );
-
-  const refComponent = refComponentHoc(wrappedComponent, refer);
-  const ResultComponent = decorators.reduce((prev, next) => {
-    return next(prev);
-  }, refComponent);
-
-  return class RefComponentWrapper extends React.Component {
-    constructor(props) {
-      super(props);
-    }
-
-    componentDidMount() {
-      !this._refId && (this._refId = refer.id);
-    }
-
-    componentWillUnmount() {
-      refer[this._refId] = null;
-      this._refId = null;
-    }
-
-    @autobind
-    getRef() {
-      return refer[this._refId];
-    }
-
-    render() {
-      const props = { ...this.props };
-      return <ResultComponent {...props} />;
-    }
-  };
-}