useState vs useRef — what should I use?

daribock — Thu, 29 Jan 2026 11:32:59 +0000

When working with React hooks, useState and useRef can look similar at first — both store values.
The key difference is whether React should re-render when the value changes or not.

useState

Use useState when a value affects what the user sees.

Triggers a re-render when updated
Ideal for UI-related data (form values, counters, toggles)

const [count, setCount] = useState(0);
setCount(count + 1);

useRef

Use useRef when you need to store a value without re-rendering the component.

Does NOT trigger a re-render
Perfect for DOM access for example to focus a HTML element

const inputRef = useRef<HTMLInputElement>(null);
inputRef.current?.focus();

Rule of thumb

If the value changes and the UI should react → use useState
If the value changes but the UI doesn’t care → use useRef

How can you use i18next with Yup to get clean, translated validation errors?

daribock — Thu, 22 Jan 2026 13:38:51 +0000

Form validation with Yup, react-hook-form, and i18next often starts simple—and quickly turns messy.

Every rule needs a translated message, leading to repetitive t('validation.required') calls all over your schemas.

There’s a better way.

The key is Yup’s global setLocale configuration. It lets you define all validation messages once and automatically apply them everywhere — fully translated and consistent.

The Problem (What usually goes wrong)

const schema = yup.object({
  email: yup
    .string()
    .required(t('validation.required'))
    .email(t('validation.email')),
  password: yup
    .string()
    .required(t('validation.required'))
    .min(8, t('validation.minLength', { min: 8 })),
});

Issues:

❌ Repetitive translation calls
❌ Hard to maintain
❌ Easy to forget translations
❌ Inconsistent wording across forms

In the project I am working on we had the same Problem. Even worse we did a mix of a lot of different things to display the error message which resulted in a big unmaintainable mess.

Here is how you can solve it!

The Solution: Global Yup Locale + i18next

1️⃣ Configure Yup once (with translations)

import { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import * as yup from 'yup';

export const useYupLocale = () => {
  const { t, i18n } = useTranslation();

  useEffect(() => {
    yup.setLocale({
      mixed: {
        required: t('validation.required'),
        notType: t('validation.invalid'),
      },
      string: {
        email: t('validation.email'),
        min: t('validation.minLength', { min: '${min}' }),
        max: t('validation.maxLength', { max: '${max}' }),
        url: t('validation.url'),
      },
      number: {
        min: t('validation.numberMin', { min: '${min}' }),
        max: t('validation.numberMax', { max: '${max}' }),
        integer: t('validation.integer'),
        positive: t('validation.positive'),
      },
    });
  }, [i18n.language]);
};

✅ Yup automatically replaces ${min} / ${max}
✅ Messages update instantly when the language changes

2️⃣ Translation files

// en.json
{
  "validation": {
    "required": "This field is required",
    "email": "Please enter a valid email address",
    "minLength": "Must be at least ${min} characters",
    "maxLength": "Must be no more than ${max} characters",
    "integer": "Must be a whole number"
  }
}

// de.json
{
  "validation": {
    "required": "Dieses Feld ist erforderlich",
    "email": "Bitte geben Sie eine gültige E-Mail-Adresse ein",
    "minLength": "Mindestens ${min} Zeichen",
    "maxLength": "Höchstens ${max} Zeichen",
    "integer": "Muss eine ganze Zahl sein"
  }
}

3️⃣ Initialize once at app level

export const App = () => {
  useYupLocale();

  return <YourApp />;
};

The Result: Clean, readable schemas

const schema = yup.object({
  email: yup.string().required().email(),
  password: yup.string().required().min(8),
  age: yup.number().required().min(18).integer(),
});

No translations.

No duplication.

Still fully localized.

Custom messages? Still possible

confirmPassword: yup
  .string()
  .required(t('validation.passwordMatch'))

Benefits

✅ DRY – define messages once
✅ Consistent validation across all forms
✅ Easy maintenance (change text in one place)
✅ Automatic language switching
✅ Much cleaner schemas
✅ Better developer experience

Takeaway

If you use Yup + i18next, configuring Yup’s global locale is the cleanest way to get translated, consistent, and maintainable validation errors.

You focus on validation logic.

Yup and i18next handle the messages.

Once you try this pattern, you won’t go back.

DEV Community: daribock