/daniele-zurico.github.io/static/d6eb6b2f681f2b831ae35c6da2a3be6e/69585/REF.png 200w,
/daniele-zurico.github.io/static/d6eb6b2f681f2b831ae35c6da2a3be6e/497c6/REF.png 400w,
/daniele-zurico.github.io/static/d6eb6b2f681f2b831ae35c6da2a3be6e/360e2/REF.png 503w

React - useRef Hook

January 16, 2019

If you already read my previous post we talk about how to create a simple todo with useState and useReducer. Today we'll see how we can use useRef to refer to our element.

UseRef returns a mutable ref object whose .current property is initialised to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.

const refContainer = useRef(initialValue);

To clarify better how we can use useRef we take the previous example and we'll apply the required changes. React few days ago release a new version 16.8.0-alpha.0 and if you want to use hooks you need to change your package.json:

react": "16.8.0-alpha.0", "react-dom": "16.8.0-alpha.0",

In the previous post the result was:

https://gist.github.com/daniele-zurico/dcfe43771bb3fec51189d40d009521b7

We honestly don't need to perform too many changes but let's do it togheter:

The first thing we need to do is to declare our useRef element:

const todoInputRef = useRef("");

Now we need to use todoInputRef and for that we'll change our input:

input type="text" placeholder="Todo" ref={todoInputRef}

As you can see we removed the value and the onChange handler.

In our todoAddHandler we'll extract the value using our todoInputRef:

const todoAddHandler = () => { const todoName = todoInputRef.current.value; dispatch({ type: "ADD", value: todoName }); };