Fullstackopen part 5: createRef and forwardRef causing problems with autofocus
Tags: react, fullstack
Published: 2020-05-22 18:17:36

Hi, I'm currently in part 5 of the [University of Helsinki fullstackopen](https://fullstackopen.com/en/about) course. 

I'm not officially enrolled, (not even sure how to do that) and this fact is relevant - and I'm fine with it - because it lets me be free to take as long as I wish to complete each part of the course. 

I don't know if I am a slow learner or not, but one reason my progress is slow, is because I insist on *understanding* each concept that is introduced, and I test myself by _attempting_ to use each new thing on a different app. In addition to doing the exercises, I keep a third & fourth app updated with new features. 

This practice has, I believe, resulted in gradually achieving deeper understanding and more confidence that I actually learned the lesson. 

HOWEVER... 

It has also caused me, on more than one occasion, to become deeply frustrated and on the verge of despair, when I am unable to successfully replicate a feature in a slightly different way. Sometimes I try to expand on a feature in the exercise app (the blog list) by using it in a slightly different way, and/or I try to replicate it in a different app (like the notes and phonebook apps from the earlier exercises). 

The problem I am currently working on, and the reason for this post, is the `createRef()` function introduced in [part 5b](https://fullstackopen.com/en/part5/props_children_and_proptypes/). 

I was already using `useRef` to make the focus on initial render to be in the `new note` input, so that immediately when the page loads, you can just start typing, since that was the only field on the page at that moment. 

Now, after using `createRef` to handle the `toggle` functionality, my `useRef` focus does not work any more, and I have spent the entire last two days (I'm not working, so I actually work on this all day, every day) trying to learn how to use `createRef`, `useRef`, and `forwardRef`. It's tricky because the toggle hides and unhides the login and the new note forms, which, in my opinion, should also be auto focused on the `username` and then `new note` fields, when each comes into view (this happens separately; I'm not trying to autofocus two things that are rendered at the same time). 

Hundreds of google and stackoverflow searches have produced nothing but the most basic implementation; meaning, they work for a single component, but break when the component is factored out, or, it is only used for a single form on a single page. 

What I have now is a situation where I need to use these `ref`s in two different ways, and I have tweaked the code at least 100 different ways that seemed to make sense, but nothing works - meaning, I can *either* have the toggle functionality, *or* the auto focus, but not both. I want focus to happen when the `login` button or the `new note` button is clicked.

Important note: I am using strictly functional components and not class components. I understand that using `ref`s with functional components requires `useEffect`, since there is no mount/unmount. I am not interested in having a hybrid app with both functional and class components (does anyone actually do that? Maybe I'm wrong?). I am convinced that there must be a way to make this work, or perhaps there is a package that can help with auto focus? I try to avoid adding packages unless absolutely necessary, but this problem is super frustrating, and I'm about ready to move on. 

Here are the links to my [frontend repo](https://github.com/I-keep-trying/fullstack2020-notes-frontend), [backend repo](https://github.com/I-keep-trying/notes-backend), and the [heroku deployed](https://floating-bayou-03011.herokuapp.com/) notes app. There are usernames and passwords in the `.rest` file on the backend, but if you just want to try out the heroku app, you may use `username: Bart_Simpson` with `password: password` and that should work. If you want to clone the repos to try them out, you need a mongodb database to connect to in order for it to work. 

When I figure out this focus problem, the next thing I need to do is figure out how to expire the jwt tokens. I have added code that *looks like* it's supposed to make the token expire in 1 hour, but it doesn't. Logging out does indeed remove the locally stored token, for me anyway.

In the meantime, I guess I'll be doing some deep dives into how the DOM works with react, and perhaps [this article](https://overreacted.io/a-complete-guide-to-useeffect/) will help.