DEV Community

React Hooks (useContext, useEffect, useState, useRef) Summarized Like Crazy (Short & Concise Article)

Mohmed Ishak on June 02, 2021

Hey React engineers! In this article, I'll explain the 4 most important Hooks you need to know in React. Don't worry, I'll not write a long essay a...

Read full post

Valentin Nankov • Jun 5 '21

Can you clarify the ref hook? From your example I am confused, does the ref help us to make an instance to this same component ( something like new keyword )? Or the ref just give us the access to the current keyword (currently visible DOM element) and nothing more?
Other than that, very good explanation, thank you!

Mohmed Ishak • Jun 5 '21 • Edited

Short answer: useRef refers to an object and the .current property allows you to access its instance. It is what you do with useRef that matters.

The core usage of useRef hook is to store reference of element.

function TextInput() {
  const theInput = useRef();

  const onClick = () => {
    theInput.current.focus();
  };

  return (
    <>
      <input ref={theInput} type="text" />
      <button onClick={onClick}>
        CLICK ME TO FOCUS IN THE INPUT WITHOUT CLICKING THE INPUT ITSELF BUT ME,
        THE BUTTON!
      </button>
    </>
  );
}

What's happening in this code snippet above is that we've got a text input and right below that a button. We know that the text input will get focused when clicked but that is not the concern here. The challenge is to focus the text input when the button (another element) is clicked. How?

There are just 3 easy steps you need to follow. First, call useRef and get the value, in this case "theInput". Then we need to connect that value to any element, in this case the input element by writing (ref={theInput}). At this point, "theInput" and element in connected, or in other words, "theInput" now refers the input element. Finally, we can change the state of the input element to be focused, because we've got a reference to it using theInput.current.focus().

Martin Broder • Jun 9 '21 • Edited

I'm sorry but that's bollocks. useRef has nothing to do with the DOM. It's stated clearly on the offical docs:

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

Please don't spread false information.

useRef is useful whenever you want to reference the same value on every render, but not trigger a re-render when its value changes.

Hans Christian Bartelt • Jun 9 '21

That's it. Thank you 👍

Mohmed Ishak • Jun 9 '21 • Edited

@mrtnbroder apparently you're right, my bad. I just need to remove the "DOM" part in that comment, will edit it now. That's how I always understood the useRef hook. Thanks dude.

Valentin Nankov • Jun 5 '21

Thank you very much for the clarification! So in other words useRef is like querrySelector function in the pure JS way. Please correct me if I am wrong.

Mohmed Ishak • Jun 6 '21

You're right. Not to worry, usually you don't need it.

Moustache Design • Jun 8 '21

yes, the difference is querySelector is imperative, useRef declarative, also querySelector does a search for the string you pass to it, so you have to know that is unique and won't change.
useRef on the other hand, ties itself to that jsx element and nothing else.

Mohmed Ishak • Jun 8 '21

Cool!

Rachel Nabors • Jun 4 '21

Nice write up! To clarify, the only way to trigger a render is to use the state setting function (ie setState()). If you update the state variable any other way, it not only won't trigger a rerender, but if something ELSE triggers that rerender, if your variable is a primitive like boolean, number or string, you'll lose your changes with the rerender!💜

Mohmed Ishak • Jun 4 '21 • Edited

Yes, totally forgot that. Thanks for reminding me. I'll edit the article. 😄

Harsh Wardhan • Jun 6 '21

I would suggest to add Case 3 for useEffect() hook mentioning clean-up function (the return function). Use case example: When you need to refresh a particular component let's say every 5 minutes then you would set the interval in useEffect as usual but to clear the interval which should be done in this clean-up return function (similar to componentWillUnmount class component lifecycle method). I'd recommend a short article on this, by Martín Mato - dev.to/otamnitram/react-useeffect-...

Overall, nice and concise article. Thanks for this quick read!

Mohmed Ishak • Jun 6 '21

Thanks bro, I'll add it to my article.

Esbjörn Blomquist • Jun 8 '21

You could simplify
return <>{isVisible && <h1>I'm visible</h1>}</>;
to
return isVisible && <h1>I'm visible</h1>;

and I think this is a syntax error:
<ScrollView onContentSizeChange={() => }>

Mohmed Ishak • Jun 8 '21

Yes could've simplified that one. As for the syntax error, it's not a syntax error, but just the opening tag of ScrollView component in React Native. I wrote "//..." below that line to indicate that more content is expected in the code snippet but that content doesn't matter for the tutorial. I hope we're friends now hehehehh.

kevinrobert3 • Jun 4 '21

Nice.. can you do one on creating custom hooks 🪝

Mohmed Ishak • Jun 7 '21

Bro, I wanted to write an article on this, but I stumbled upon a pretty good article on how to create custom hooks, here you go: dev.to/keyurparalkar/creating-cust...

Mohmed Ishak • Jun 4 '21

I've made a bunch of custom hooks that work well without overcomplicating stuffs. Next post will be about that. Follow me so that you don't miss that post.

Cephas Zulu • Jun 3 '21

Interesting article

Mohmed Ishak • Jun 3 '21

Thank you.

Abdulaziz Almalki • Sep 4 '21

Too short unfortunately, useless code snippets.

Mohmed Ishak • Sep 4 '21

Cool.

sgnilreutr • Jun 9 '21

Always nice to read so much information laid out clear and concise.

Mohmed Ishak • Jun 11 '21

Thank you.

Luis Cutiopala • Jun 8 '21

What do you think of Hook useReducer?

Mohmed Ishak • Jun 9 '21

I've never used it. 😄

Mateus Marquezini • Jun 8 '21

nice post, man! Thank you! :)

Mohmed Ishak • Jun 8 '21

Thanks man. 😃

Felix Onen • Jun 5 '21

Nice article, simple and precise. thanks

Mohmed Ishak • Jun 5 '21

Glad you liked it.

Ashish • Jun 4 '21

Nice explaination of hooks 👍👍

Mohmed Ishak • Jun 4 '21

Thanks dude!

Marimar Dela Cerna • Jun 3 '21

Great this is very helpful

Mohmed Ishak • Jun 3 '21

Thank you, give it a like!

Gabriel Hernández • Jun 5 '21

Very concise & helpful to read, thanks for the great post, looking foward to see your article about why usecontext + usereducer are not a subtitute for redux.

Mohmed Ishak • Jun 5 '21

Thanks man. Appreciate that. 😄