【React Hooks】How to use Custom Hook

Newly added feature React Hooks API released from React v16.8

featuedimage


Here I wrote an example of the implementation of simple way to organize your own hook.


At first, write every code in a FC Component, including state manipulation and style.

Then, break them into two separate files to organize presentational component and container component.

Starting code src/App.tsx

const App: FC = () => {
  const [someValue, setSomeValue] = useState(INITIAL_STATE);

  const someFunc = () => {
    // just an example
  };

  useEffect(() => {
    // componentDidMount && componentDidUpdate
    return () => {
      // componentWillUnmount
    };
  }, []);

  return (
    <div>
      <button onClick={someFunc}>{state}</button>
    </div>
  );
};

Now separate all logics and styles.


src/components/App.tsx(Presentational Component)

interface AppProps {
  someValue: number;
  someFunc: () => void;
}

const AppComponent: FC<AppProps> = ({ someValue, someFunc }) => (
  <div>
    <button onClick={props.someFunc}>props.state</button>
  </div>
);

src/container/App.tsx(Container Component)

const useSomething = () => {
  const [someValue, setSomeValue] = useState(INITIAL_STATE);

  const someFunc = () => {
    // just a example
  }

  useEffect(()=>{
    // componentDidMount && componentDidUpdate
    return ()=> {
      // componentWillUnmount
    }
  }, []);

  return [someValue, someFunc];
}

const AppContainer = () => {
  [someValue, someFunc] = useSomething;

  return <AppComponent someValue={someValue}, someFunc={someFunc}>;
}

Some comments to explain useEffect

const useSomething = () => {
  const [state, setState] = useState(INITIAL_STATE);

  const someFunc = () => {
    // just a example
  };

  useEffect(() => {
    // Anonymous func as a first parameter
    // componentDidMount && componentDidUpdate
    return () => {
      // return value is optional
      // componentWillUnmount
    };
  }, []);
  // Pass an empty array as a second argument.
  // This tells React that the effect doesn't depend on any values from props or state, so it never needs to re-run.
  // This way, the props and state inside the effect will always have their initial values.
  // See more detail at https://reactjs.org/docs/hooks-effect.html

  return [state, someFunc];
};

In this way the component is more maintainable and scalable.