React Native Todo App with Hooks

3 min readDec 1, 2018


This: English translation article post. Tell me that there was a weird place as it translates on google.

With Hooks, you can now handle state with Function Conponent.You came to see articles on Todo apps and so on using useState.

Let’s use Hooks with React Native this time.

What is React Hooks, what is useState, what you do not know please check the following. ↓

Please note that Hooks is an alpha version to the last.


$ react-native init hooks_todo

As of November 26, 2018, react native does not correspond to hooks.
To use it clone from react repository, blah blah blah … It’s troublesome.

Using React Hooks in React Native · Issue #21967 · facebook/react-native

This time we will use the prepared react-native which volunteers are forking!


$ yarn add react@next react-native@"npm:@brunolemos/react-native"


If it does not work, the following error will be displayed.

It seems that libraries called react-native-hooks are beginning to be made. This seems to be a built-in module of react-native hooks as a wrapper, so we will not mention it in this article!


$ yarn start
The familiar screen appeared.


Here, we use native-base to improve visibility.

$ yarn add native-base
$ react-native link


This time it is composed referring to this post.


  • Layout
  • Todo Form
  • Todo List


  • Add Todo
  • Todo complete / un complete
  • Delete Todo

In this time we will use useState and extend it.



Create a Component with <Header>.


Component with TextInput and input button
We will implement it with Input and Icon of native-base.


What React.memo?

-- const Component = (props) => {};
++ const Component = memo((props) => {});

In React, performance becomes worse if there are many re-renders.
Performance tuning is done so that re-rendering is not performed if props is the same with shouldComponentUpdate,
For Class Component there was a React.PureComponent that shouldComponentUpdate by default.
It is React.memo that this is implemented by Function Component.


Will pass custom useState to each Component in App.js.
I define a wrapper for useState in hooks / todoList.

custom hooks

This Case, in order to compensate for the use which is not enough with useState …

const [state, setState] = useState(initialState);

Create wrappers.

Then …

Hooks can be used for applications that are lighter than redux, and easy to use.

thank you for reading.

github: nitaking/react-native-hooks-todo




Engineer | Blitz.js lover