DEV Community

Demystifying React Hooks: useRef

Milu on June 20, 2020

React Hooks changed the game when they came out! They are a simpler way to encapsulate stateful behavior and side effects in a user interface while...

Read full post

David Yao • Jun 21 '20

I love how you explain things in such a clear way. Thanks!

Milu • Jun 21 '20

Thanks David! :)

Carlos Roso • Jun 21 '20

Great illustrations and awesome explanation. Thanks, Keep it up!

Milu • Jun 21 '20

Thank you for reading and the words of encouragement Carlos!

ponyjackal • Jun 21 '20

Milu, I love this article

Milu • Jun 21 '20

Thank you!!! :)

Greg Valainis • Jul 23 '20

Great article on the underpinnings and usage of useRef. Your examples and illustrations do a great job of showing practical usage. However, your discussion about createRef is somewhat misleading. createRef "creates a new instance of the ref on every render instead of keeping a value between renders" is only true within a function component. createRef should not be used in function components. It should be used in class components where a new instance is not created on every render.

Milu • Jul 23 '20

Thank you for pointing this out Greg! I haven't used class components since React hooks came out and I shouldn't have assumed everybody is on the same boat as me. I've updated my post to clarify the use of createRef. Thanks again for the feedback!

Diego Azevedo • Jun 29 '20

Illustrations, pictures, clear examples. Valuable content. Thanks so much for sharing that! It is my new favorite series about Hooks.

Milu • Jun 29 '20

Thank you Diego! I really appreciate your feedback :)

Jacob Evans • Jun 21 '20

This was awesome! I'll pass it along to some learners I know! Great work!!

Milu • Jun 21 '20

Thank you for the kind words and for sharing this post Jacob!

Felix Terkhorn • Jun 21 '20

Yeah!!! Besides being great info on React, this is the level of quality we should all be striving for in our technical articles! 🔥

Milu • Jun 21 '20

Thank you Felix! This comment encourages me to continue sharing content :)

Euphoric • Nov 16 '22

Thanks for this article and the codepen examples!
One question, in your "Where should you update a useRef() value?" example, you have testRef = testRef.current + 1. Can it just be testRef.current + 1? I believe testRef is a plain object, so there's no need to set testRef equal to a number; it's enough to update the current property.