React hook useRef not working with styled-components and typescript

Question

I've some problem using the useRef hook with a styled component.

Linter alerts me that Object is possibly 'null' inside the didMount useEffect. Any idea about this?

This is not a duplicate for 2 reason:

The old answer refers to the ref used in a class component, that was the only way to use it before React hooks,
The innerRef props isn't supported anymore in the current version of styled components.

Here's a sample snippet of my component:

import React, { useRef, useEffect } from 'react';
import styled from 'styled-components';

const StyledInput = styled.input`
  background: transparent;
`

const MyForm = () => {
  const inputRef = useRef(null);
  
  useEffect(() => {
    if (inputRef && inputRef.current) {
      inputRef.current.focus(); //Object is possibly 'null'
    }
  }, []);

  return (
    <StyledInput ref={inputRef}/>
  );
}

@MatthewBarbara innerRef isn't supported anymore by styled components — vlk, Sep 22 '19 at 16:48

score 26 · Accepted Answer · answered Sep 23 '19 at 05:21

26

I've finally found a solution:

const inputRef = useRef() as React.MutableRefObject<HTMLInputElement>;

It works for me:

import React, { useRef, useEffect } from 'react';
import styled from 'styled-components';

const StyledInput = styled.input`
  background: transparent;
`

const MyForm = () => {
  const inputRef = useRef() as React.MutableRefObject<HTMLInputElement>;

  useEffect(() => {
    if (inputRef && inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return (
    <StyledInput ref={inputRef}/>
  );
}

answered Sep 23 '19 at 05:21

vlk

1,414
1
13
22

You can actually pass `HTMLInputElement` in the typing parameters: `const inputRef = useRef()` instead of using `as` – Benny Hinrichs Feb 04 '20 at 04:43
i keep getting an error "Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?" – Victor Ferreira Apr 25 '20 at 02:16
`useRef` has a generic allowing to modify the type additionally to the default value: `const inputRef = useRef()` results in `React.MutableRefObject`. – davidenke Sep 03 '20 at 13:30
How do you do this in plain Javascript? – Daniel Tkach Dec 28 '21 at 23:18

score 7 · Answer 2 · answered May 10 '21 at 17:48

7

As an alternative to the current accepted answer, you can also do:

const inputRef = useRef<HTMLInputElement>(null);

answered May 10 '21 at 17:48

Connor M

331
3
5
18

score 0 · Answer 3 · answered Sep 22 '19 at 16:45

0

Pass your inputRef in the array argument of useEffect and let's see if that works, you aren't guaranteed to have a .current in your ref, so you should run the effect every time inputRef changes

answered Sep 22 '19 at 16:45

Carwyn Stephen

134
4
23

React hook useRef not working with styled-components and typescript

This is not a duplicate for 2 reason:

3 Answers3