React Native Todo App with Hooks

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. ↓

• 【React】新機能hooks — Qiita
• The Rise of Functional Components — React v16.7.0 (now with Hooks!)

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

Setup

$ 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!

cool.

https://github.com/facebook/react-native/issues/21967#issuecomment-438473603

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

Note

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!

Next

$ yarn start

The familiar screen appeared.

native-base

Here, we use native-base to improve visibility.

$ yarn add native-base
$ react-native link

configuration

This time it is composed referring to this post.

Component

• Layout
• Todo Form
• Todo List

Function

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

In this time we will use useState and extend it.

Development

<Layout>

Create a Component with <Header>.

<AddTodoForm>

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

<TodoList>

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.

App.js

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