reactjs - Using ref in a functional component - Is this the correct way?

Question

I am building a csv file upload component in my react web-app. For this, I have written a functional component like this. There are two input fields. (1) type = file and (2) type = 'submit'. I want to upload files using file type input and then when the user clicks submit type button, I want to do something with files object of input type file.

I do this like following

import React from 'react';

function CSVUpload() {
    const [handleUpload] = useHandleUpload();

    const ref = React.createRef();
    return(
        <div className='CSV-upload'>
            <input ref={ref} type='file' id='input-csv-upload' multiple/>
            <input type='submit' value='Upload file' onClick={() => handleUpload(ref)}/>
        </div>
    )
}

function useHandleUpload(){
    const handleUpload = (ref) => {
        const files = ref.current.files;
        console.log(files);
    }
    return [handleUpload];
}


  
  export default CSVUpload;

As you can see, I use hooks and refs to achieve this. I can see that this works as expected, but I'm not sure whether this is correct and recommended way to use refs like this. I'm bit confused since I don't use anything like forwardRef mentioned in the documentation. I just create a simple react ref, attach it to my input by using HTML attribute, and then access it in my onClick handler.

I just want to be sure that this does not create any problems in the future. A little feedback would be awesome. Thanks in advance.

question from:https://stackoverflow.com/questions/65896225/using-ref-in-a-functional-component-is-this-the-correct-way

Answer 1

In a functional component, it would be more appropriate to use the hook version, useRef:

const ref = useRef();

It won't make a difference in the logic here, but it's a good habit to get into. (createRef will create a new ref each render, which usually isn't desirable - if other things used it as a prop or in a dependency array, they would re-run/re-render more often than needed)

Though, if you wanted, you could remove the use of refs altogether by navigating to the previous element inside the click handler:

const clickHandler = e => handleUpload(e.target.previousElementSibling);

<input type='submit' value='Upload file' onClick={clickHandler}/>

(The type="submit" seems odd - if this is in a form, you'll want to call e.preventDefault() too. If it's not in a form, the type="submit" doesn't do anything, I believe)

I also don't see any sense in making a hook of handleUpload, I'd just declare handleUpload in the main body CSVUpload, maybe with a useCallback if you wanted.