Error: Cannot access refs during render

[siamahnaf]

Summary

A linting error I am getting-

139:54  error  Error: Cannot access refs during render

React refs are values that are not needed for rendering. Refs should only be accessed outside of re
nder, such as in event handlers or effects. Accessing a ref value (the `current` property) during r
ender can cause your component not to update as expected (https://react.dev/reference/react/useRef)

Here is the component-

"use client"
import { useState, Fragment, useRef } from "react";
import { Dialog, Button, Loading, Input, EmailEditor, Select } from "@repo/ui";
import Image from "next/image";
import { IconBugOff } from "@repo/icon/tabler";
import { useForm, SubmitHandler, Controller } from "react-hook-form";
import toast from "react-hot-toast";
import { SignaturePad, SignatureCanvasRef } from "@siamf/react-signature-pad";
import { useUpload } from "@repo/blob";

//Essentials
import { keywords, formats } from "@/components/email-template/email-form-data";

//Types
import { ReceiptFormInput } from "@/server/receipt/input/receipt.input";

//Trpc
import { trpc } from "@/trpc/client";

//Interface
import { TReceipt } from "@/server/receipt/output/receipt.output";
interface Props {
    open: boolean;
    onClose: () => void;
    item: TReceipt;
}

const EditReceipt = ({ open, onClose, item }: Props) => {
    //State
    const [sig, setSig] = useState<boolean>(false);

    //Trpc
    const utils = trpc.useUtils();
    const { data, fetchNextPage, isFetchingNextPage, hasNextPage, isLoading } = trpc.receipt.templates.useInfiniteQuery({
        search: "",
        limit: 12,
    }, {
        getNextPageParam: (lastPage) => lastPage.nextCursor,
        initialCursor: 1,
        enabled: !!open
    });
    const { mutate, isPending } = trpc.receipt.update.useMutation({
        onSuccess: (data) => {
            return utils.receipt.list.refetch().finally(() => {
                toast.success(data.message);
                reset();
                onClose();
            })
        },
        onError: (error) => {
            toast.error(error.message)
        }
    });

    //State
    const [template, setTemplate] = useState<{ templateId: string; previewUrl: string } | null>({ templateId: item.templateId || "", previewUrl: item.previewUrl || "" });

    //Upload
    const { upload, isUploading } = useUpload({
        onError: (error) => {
            toast.error(error.message)
        }
    });

    //Form Initializing
    const {
        register,
        handleSubmit,
        formState: { errors },
        reset,
        control
    } = useForm<ReceiptFormInput>({
        values: {
            tmlStr: item?.tmlStr || "",
            subject: item?.subject || "",
            dateFormat: item?.dateFormat || "",
            booleanValue: item?.booleanValue || "",
            brandId: item.brandId || ""
        }
    });

    //Ref
    const ref = useRef<SignatureCanvasRef>(null);

    //Data
    const rawData = data?.pages.flatMap(a => a.data);

    //Handler
    const onSubmit: SubmitHandler<ReceiptFormInput> = async (value) => {
        let sigUrl: string;
        if (sig) {
            const { blob } = await upload(ref.current?.toFile());
            sigUrl = blob?.url || ""
        } else {
            sigUrl = item.signature
        }
        if (template) {
            mutate({
                ...value,
                templateId: template.templateId,
                previewUrl: template.previewUrl,
                signature: sigUrl,
                id: item.id
            });
        }
    }

    return (
        <Dialog
            open={open}
            onClose={onClose}
            className="w-[740px] md:w-[740px] lsm:w-[600px] msm:w-[500px] sm:w-[420px] xxs:w-[320px]"
        >
            <Dialog.Header
                title="Add a receipt"
                onClose={onClose}
                className="px-5 py-4"
            />
            <hr className="border-stroke-light" />
            <Dialog.Body className="px-5 py-4">
                {!template &&
                    <Fragment>
                        <h4 className="text-xl font-semibold text-strong">Choose Template</h4>
                        {isLoading &&
                            <div className="my-6 text-center">
                                <Loading className="mx-auto" />
                                <p className="text-grayed">Please wait...</p>
                            </div>
                        }
                        <div className="grid grid-cols-4 md:grid-cols-4 msm:grid-cols-3 xxs:grid-cols-2 gap-x-7 gap-y-10 mt-4">
                            {rawData?.map((item) => (
                                <div key={item.id} className="relative cursor-pointer" onClick={() => setTemplate({ previewUrl: item.imageUrl, templateId: item.templateId })}>
                                    <Image src={item.imageUrl} width={595} height={841} alt={item.name} className="border border-solid border-stroke/60 rounded-2xl" />
                                    <h4 className="text-center mt-1.5">{item.name}</h4>

                                </div>
                            ))}
                        </div>
                        {rawData?.length === 0 &&
                            <div className="text-center">
                                <IconBugOff className="text-error mx-auto" size={30} />
                                <h4 className="text-lg font-semibold">No Template Found</h4>
                                <p className="font-light">No available templates here, please wait to be uploaded some templates</p>
                            </div>
                        }
                        {hasNextPage &&
                            <div className="mt-10 text-center">
                                <Button isPending={isFetchingNextPage} onClick={() => fetchNextPage()}>
                                    Load More
                                </Button>
                            </div>
                        }
                        <Button
                            className="mt-8"
                            onClick={() => setTemplate({
                                previewUrl: item.previewUrl,
                                templateId: item.templateId
                            })}
                        >
                            Cancel now
                        </Button>
                    </Fragment>
                }
                {template &&
                    <Fragment>
                        <button className="text-main underline underline-offset-2" onClick={() => setTemplate(null)}>
                            Change Template
                        </button>
                        <form onSubmit={handleSubmit(onSubmit)} className="mt-6">
                            <Input
                                id="subject"
                                label="Email Subject"
                                placeholder="Subject"
                                {...register("subject", { required: "Email subject is required" })}
                                errorMessage={errors.subject?.message}
                            />
                            <Controller
                                control={control}
                                name="tmlStr"
                                rules={{ required: "Template message is required" }}
                                render={({ field: { onChange, value } }) => (
                                    <EmailEditor
                                        id="message"
                                        label="Message"
                                        placeholder="Write your message here..."
                                        value={value}
                                        onChange={onChange}
                                        rows={7}
                                        words={keywords}
                                        errorMessage={errors.tmlStr?.message}
                                    />
                                )}
                            />
                            {sig &&
                                <Fragment>
                                    <h4 className="text-base font-medium mb-3 inline-block gap-x-1.5">
                                        <span>Add your signature</span>
                                        <span className="text-main underline underline-offset-2 cursor-pointer select-none" onClick={() => setSig(false)}>(Cancel)</span>
                                    </h4>
                                    <div className="bg-white mt-2 rounded-xl border border-stroke/50 mb-4">
                                        <SignaturePad
                                            canvasProps={{ className: "w-full h-[140px] bg-transparent" }}
                                            ref={ref}
                                        />
                                    </div>
                                </Fragment>
                            }
                            {!sig &&
                                <div className="">
                                    <h4 className="text-base font-medium mb-3 inline-block gap-x-1.5">
                                        <span>Previously added signature</span>{" "}
                                        <span className="text-main underline underline-offset-2 cursor-pointer select-none" onClick={() => setSig(true)}>(Click here to change)</span>
                                    </h4>
                                    <Image src={item.signature} width={200} height={120} alt="Signature" />
                                </div>
                            }

                            <h4 className="text-lg font-medium mb-5 mt-6">Placeholder Settings</h4>
                            <Controller
                                control={control}
                                name="dateFormat"
                                render={({ field: { onChange, value } }) => (
                                    <Select
                                        label="Date Format"
                                        placeholder="Choose a date formate for rendering date"
                                        onChange={onChange}
                                        value={value}
                                        options={formats}
                                    />
                                )}
                            />
                            <Controller
                                control={control}
                                name="booleanValue"
                                render={({ field: { onChange, value } }) => (
                                    <Select
                                        label="Boolean Value"
                                        placeholder="Choose a value for boolean field"
                                        onChange={onChange}
                                        value={value}
                                        options={[
                                            { value: "on/of", label: "On/Off" },
                                            { value: "yes/no", label: "Yes/No" }
                                        ]}
                                    />
                                )}
                            />
                            <Button type="submit" isPending={isPending || isUploading}>
                                Update Now
                            </Button>
                        </form>
                    </Fragment>
                }
            </Dialog.Body>
        </Dialog>
    );
};

export default EditReceipt;

I am not calling ref during render time. Its on a onSubmit handler. Is onSubmit will call render time.

[tamish-max]

onSubmit itself is not render time. The warning is usually the React lint rule not understanding that handleSubmit(onSubmit) is an event callback that runs later.

So this is more of a lint/ref-access pattern issue than a RHF issue.

Two practical options:

1. treat it as a false positive if the rule is specifically complaining about the handleSubmit callback boundary
2. move the signature data into state/callbacks so submit no longer reads from the ref directly

For example:

const [signatureFile, setSignatureFile] = useState<File | null>(null)

const captureSignature = useCallback(() => {
  setSignatureFile(ref.current?.toFile() ?? null)
}, [])

<SignaturePad ref={ref} onEnd={captureSignature} />

const onSubmit = handleSubmit(async values => {
  const file = sig ? signatureFile : null
  const { blob } = file ? await upload(file) : { blob: null }
  // ...
})

If you keep the current approach, I’d still say the important point is: RHF is not invoking your submit callback during render. The rule is just being conservative about ref.current access.

[DaCameraGirl]

You're correct — onSubmit is an event handler, not render code, so accessing ref.current there is perfectly valid. This is a false positive from the React Compiler ESLint rule (eslint-plugin-react-compiler).

What's happening

The react-compiler lint rule react-compiler/react-compiler (part of the React 19 / React Compiler toolchain) is over-aggressively flagging any .current access it can't statically prove is outside the render path. Because your onSubmit is defined inside the component body, the static analysis can't always distinguish "defined during render" from "called during render".

Fix options

Option 1: Suppress the specific lint error (quickest)

const onSubmit: SubmitHandler<ReceiptFormInput> = async (value) => {
  let sigUrl: string;
  if (sig) {
    // eslint-disable-next-line react-compiler/react-compiler
    const { blob } = await upload(ref.current?.toFile());
    sigUrl = blob?.url || '';
  }
  // ...
};

Option 2: Extract the ref read to a callback (cleanest)

Move the ref access into a useCallback with an explicit dependency that signals to the compiler it's a stable function, not inline render code:

const getSignatureFile = useCallback(() => {
  return ref.current?.toFile();
}, []);

const onSubmit: SubmitHandler<ReceiptFormInput> = async (value) => {
  if (sig) {
    const { blob } = await upload(getSignatureFile());
    sigUrl = blob?.url || '';
  }
};

This is the pattern the React Compiler is designed for — imperative ref reads wrapped in callbacks, not inline in handlers.

Option 3: Disable the rule for the file if you get many false positives

/* eslint-disable react-compiler/react-compiler */

Why the rule fires here but not always

The React Compiler's lint rule does static analysis and flags .current reads that appear within the component function body when it can't prove they're guarded from the render path. It's a known limitation that handlers defined inline (not via useCallback) can trigger false positives. The React team is aware of this and improving the heuristics, but Option 2 is the idiomatic way to write ref-reading callbacks anyway.