
<p>For a long time, I dreaded reading React code with <strong>useRef</strong> because I simply did not understand it. I thought, &#8220;Why do I need a ref when I already had state?&#8221; It turns out refs are a pretty handy tool when working in React for a few reasons:</p>



<h2 class="wp-block-heading">Refs persist outside of renders</h2>



<p>Consider this block of code:</p>



<pre class="wp-block-code"><code>function App() {
  const &#91;count, setCount] = useState(0);
  const countRef = useRef(0);

  const changeCount = () =&gt; {
    setCount(count + 1);
    countRef.current = countRef.current + 1;

    console.log(`State: ${count}`);
    console.log(`Ref: ${countRef.current}`);
  }

  return (
    &lt;div className="App"&gt;
      Count: {count}
      &lt;button onClick={changeCount}&gt;Count!&lt;/button&gt;
    &lt;/div&gt;
  );
}</code></pre>



<p>My first question in dealing with refs was, &#8220;What is <strong>current</strong>, and why do we use it?&#8221;. Current is simply part of the object that comes with the ref. Now for the fun part.</p>



<p>If you take a look at the console, you will see the following as you click the button:</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="692" height="350" src="https://wp.erikamiguel.com/wp-content/uploads/2024/06/Screenshot-2024-06-04-at-8.26.18-AM-2.png" alt="" class="wp-image-26" srcset="https://wp.erikamiguel.com/wp-content/uploads/2024/06/Screenshot-2024-06-04-at-8.26.18-AM-2.png 692w, https://wp.erikamiguel.com/wp-content/uploads/2024/06/Screenshot-2024-06-04-at-8.26.18-AM-2-300x152.png 300w" sizes="(max-width: 692px) 100vw, 692px" /></figure>



<p>Why is it that the state remains one counts behind the ref? This is because the state changes on re-renders whereas the ref does not require the render to persist the value. However, we do need state to show the count value on the screen. </p>



<p>If I were to comment out the state and set the count display to the ref:</p>



<pre class="wp-block-code"><code>function App() {
  const &#91;count, setCount] = useState(0);
  const countRef = useRef(0);

  const changeCount = () =&gt; {
    //setCount(count + 1);
    countRef.current = countRef.current + 1;

    //console.log(`State: ${count}`);
    console.log(`Ref: ${countRef}`);
  }

  return (
    &lt;div className="App"&gt;
      Count: {countRef.current}
      &lt;button onClick={changeCount}&gt;Count!&lt;/button&gt;
    &lt;/div&gt;
  );
}</code></pre>



<p>Then, we would get this:</p>



<figure class="wp-block-video"><video controls src="https://wp.erikamiguel.com/wp-content/uploads/2024/06/Screen-Recording-2024-06-04-at-8.35.50-AM.mov"></video></figure>



<p>That&#8217;s because the ref is not triggering a re-render.</p>



<h2 class="wp-block-heading">Refs give access to DOM nodes</h2>



<p>This is the most common use case I&#8217;ve come across. Consider this piece of code:</p>



<pre class="wp-block-code"><code>function App() {
  const ref = useRef();

  const focusRef = () =&gt; {
    if (ref.current) {
      ref.current.focus();
    }
  }

  return (
    &lt;div className="App"&gt;
      &lt;input type="text" ref={ref} /&gt;
      &lt;button onClick={focusRef}&gt;Count!&lt;/button&gt;
    &lt;/div&gt;
  );
}</code></pre>



<p>If we <strong>console.log</strong> the <strong>ref.current</strong>, we will see that the DOM node has been passed into the ref&#8217;s current object:</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="304" height="56" src="https://wp.erikamiguel.com/wp-content/uploads/2024/06/Screenshot-2024-06-04-at-8.45.20-AM.png" alt="" class="wp-image-24" srcset="https://wp.erikamiguel.com/wp-content/uploads/2024/06/Screenshot-2024-06-04-at-8.45.20-AM.png 304w, https://wp.erikamiguel.com/wp-content/uploads/2024/06/Screenshot-2024-06-04-at-8.45.20-AM-300x55.png 300w" sizes="(max-width: 304px) 100vw, 304px" /></figure>



<p>In this way, we can use functions, like focus, on the DOM node to manipulate it without going through a re-render.</p>



<p></p>


React Hooks: useRef


<p>I have an invisible disability that affects my everyday life. Navigating my disability at work directly impacts my life outside of it. That is why it is important to develop a personal culture at work to support the effective handling of my disability. Here are some of preventative steps I have taken to ensure that I can perform effectively at work:</p>



<h2 class="wp-block-heading has-large-font-size">1. I let my managers know about my disability</h2>



<p>This is a tough one. I did not disclose my actual diagnosis. However, one manager found out because I was having an emergency, and it was too late to take preventative steps. This is the worst case scenario and should be avoided if possible. In this case, it is important to have an emergency contact so that they can act on your behalf, which is what happened to me. My emergency contact knew what to do right away and was able to get me the care that I needed at the time.</p>



<p>Currently, I have a rapport with my other managers about how I am doing without going into specifics of my condition. I let them know when I am experiencing flare ups early on so that they can be prepared and brainstorm possible options with me. Last year, after a series of flare ups, I had to take a leave of absence, but because my managers were aware of the situation, they could foresee this outcome and be prepared for it. This is the best possible outcome because I was in a responsive state and able to advocate for myself without outside intervention.</p>



<h2 class="wp-block-heading has-large-font-size">2. I take preventative days off</h2>



<p>I approach paid time off (PTO) differently than most employees. While PTO is often used for trips and personal enjoyment, I view my PTO as part of my treatment plan. I take one day off every month to prevent any symptoms that could arise from stress. This strategy has not only helped me take a step back from the stresses of everyday life but also has made me more productive at work. My team knows that I take this day off, and it allows them to plan around my schedule.</p>



<h2 class="wp-block-heading has-large-font-size">3. I work with my manager to define a working style that works for me</h2>



<p>I have had the privilege of working in supportive environments that have made me feel safe to request accommodations and activate disability policies. </p>



<p>My manager and I have conversations around the kinds of work that not only excite me but also complement my disability. I am open about the types of projects and workloads that cause flare ups and the types that do not. It is with these formal accommodations that I can contribute back to the company in a meaningful way. I highly encourage folks with disabilities to request accommodations. Knowing that it is required by law has also given me the courage to advocate for myself.</p>



<p>One option that is available is short term disability (STD). I have used STD in worst case scenarios to take a leave of absence. STD gives the option of partial pay over the course of a few months, which allows for time to rest and recover. If more time is needed, see if your company has a Long Term Disability option as well. Another option is the Family and Medical Leave Act (FMLA). FMLA allows for unpaid, job-protected leave.</p>



<h2 class="wp-block-heading has-large-font-size">4. I routinely see my doctors and follow their advice</h2>



<p>It took a long time to find my care team and establish trust in them. My care team ensures that I am healthy and stable. It is important that I have an honest rapport with them so that they can do what they do best and recommend a good treatment plan. My care team&#8217;s advice allows me to be a functioning member of society, and it is especially important for me to comply with their recommendations in order to care for myself. Their job helps me do my job.</p>



<h2 class="wp-block-heading has-large-font-size">Conclusion</h2>



<p>I have had to learn about navigating my disability the hard way, and I have made plenty of mistakes over the years, especially in emergencies. I hope that my current strategies can help those who have to navigate a disability in the workplace. Thank you for reading my post!</p>


Navigating a Disability in the Workplace


<p>A few days ago, I decided not to give up on software completely. I decided that it wasn&#8217;t out of my hands to find a path forward in my software journey. There are still many things I need to learn. </p>



<p>I&#8217;m starting my CSS journey, and I will be updating the site to be more aesthetically pleasing and modern using Sass and responsive design. The site is a work in progress, just like me, and I hope you enjoy the process as it becomes more beautiful with time.</p>



<p></p>



<p></p>


Hope arising


<p>Here I am. I&#8217;ve just learned the basics of Next, 8 years late to the party. I&#8217;ve done this so that I can leverage Faust.js for my website. I know headless CMS is all the rage these days, and while I would&#8217;ve loved to be innovative and build my own blogging platform, I just don&#8217;t have the motivation to do it.</p>



<p>I&#8217;ve been in tech for 8 going on 9 years now, and I still feel like I haven&#8217;t grown much as an engineer. I feel like I&#8217;ve lost the passion I once had when I was 24, experimenting with serverless and IoT. I find it hard to keep up with the game of software. And like Ash Ketchum, I was striving to be the very best. </p>



<p>Now, I feel like I&#8217;ve stagnated. My curiosity has been killed by a number of factors, the main ones being trying to keep stable after a mental health crisis and increasing responsibilities. I feel bogged down by life, and with that, I am struggling to find my place in tech again, especially with the rise of AI. Not to mention the chokehold that imposter syndrome has on me.</p>



<p>I feel like no one wants to talk about being stuck or feeling like they haven&#8217;t achieved anything in a significant amount of time. Yes, I am alive, but I want to be fulfilled. I enjoy the bread and butter that comes with being an engineer. I just &#8211; would like to fit in somewhere. I would like to hyperfixate on something technical. I just don&#8217;t know what, and I don&#8217;t know where to start anymore. School was exciting but predictable. Taking charge of my own life has been one of my biggest struggles to date. </p>



<p>I haven&#8217;t seen anyone talking honestly about this, and I would like to know what others have done to get out of a rut.</p>


React Hooks: useRef

Erika Miguel

June 4, 2024

Navigating a Disability in the Workplace

Erika Miguel

May 16, 2024

Hope arising

Erika Miguel

April 3, 2024

Between a rut and a hard place

Erika Miguel

April 1, 2024