Keeping up with frontend tools feels like a full-time job. Let's skip the hype and look at the actual features that make our day-to-day coding faster and cleaner.

  • How React ref is changing as a prop
  • Cleaner template types in TypeScript
  • New utility functions in Tailwind CSS

React Passes Refs Directly

Passing a reference (ref) to a child component used to require using forwardRef, which added extra boilerplate code. Now, you can pass refs as normal props directly to functional components.

// Before
const MyInput = forwardRef((props, ref) => {
  return <input ref={ref} {...props} />;
});

// After
const MyInput = ({ ref, ...props }) => {
  return <input ref={ref} {...props} />;
};

This change removes unnecessary wrapper functions and keeps your component trees flat.

TypeScript Template Literal Types

TypeScript now lets you build robust string patterns directly into your types, catching typos before you even run your code. This is great for combining CSS values or API endpoints.

// Before
type Margin = string;

// After
type Spacing = 'sm' | 'md' | 'lg';
type Margin = `m-${Spacing}`; 
// Margin type is now strictly 'm-sm' | 'm-md' | 'm-lg'

This lets you restrict string inputs to a very specific set of valid options without writing complex custom validators.

TypeScript development Photo by Ilya Pavlov on Unsplash

Tailwind CSS Dynamic CSS Variables

Tailwind now makes it easier to use native CSS variables for dynamic styling right inside your utility classes. You no longer need inline style objects just to pass a dynamic color.

This means your components stay purely styled through classes while still adapting to runtime data.

Common mistakes

When using the new ref prop in React, remember that it only works on functional components in React 19 and above. Older versions will still throw an error if you try to skip forwardRef.

For Tailwind, avoid putting unpredictable runtime values into utility strings because the build tool cannot scan them properly.

Open your main project today and try refactoring just one component to use direct refs instead of forwardRef.