Daniel Espino Garcia

MVI: Minimum Viable Interface for React Components

Your flexible components are a liability. Learn how a Minimum Viable Interface simplifies development by satisfying only current business needs.

MVI: Minimum Viable Interface for React Components
#1about 2 minutes

Introducing Minimum Viable Interface for business code

MVI is a philosophy for writing business-specific code by keeping the interface of your components as small as possible to satisfy current needs.

#2about 2 minutes

Benefits of a minimal component interface

Reducing component props lowers cognitive load, simplifies testing, makes refactoring easier, and improves overall codebase coherence.

#3about 2 minutes

Defining a React component's interface as its props

For the purpose of MVI, a React component's public interface is defined entirely by the props it accepts.

#4about 3 minutes

Contrasting abstract library code with specific business code

Unlike abstract library code designed for many use cases, business code should be concrete and tailored to solve a single, specific problem.

#5about 1 minute

Applying the YAGNI principle to component props

The "You Ain't Gonna Need It" (YAGNI) principle advises against adding props or features for hypothetical future needs.

#6about 5 minutes

Choosing the right prop types from booleans to styles

A hierarchy of prop types is presented, favoring simple types like booleans and enums over more flexible but dangerous ones like class names or styles.

#7about 3 minutes

Why you should wrap third-party libraries

Encapsulate third-party libraries in your own components to expose only the minimal interface needed, simplifying future refactoring and dependency swaps.

#8about 1 minute

How to avoid impossible component states with props

Design your component props using enums or union types instead of multiple booleans to prevent developers from creating invalid or nonsensical states.

#9about 2 minutes

Addressing the challenges and trade-offs of MVI

While adapting to changing business needs can be uncomfortable with MVI, the long-term benefits of clarity and simplicity often outweigh the initial friction.

Related jobs
Jobs that call for the skills explored in this talk.

Matching moments

Recreating React components using AI and dev tools
04:56 MIN

Recreating React components using AI and dev tools

WeAreDevelopers LIVE – AI, Freelancing, Keeping Up with Tech and More

Why you might not need JavaScript for everything
02:33 MIN

Why you might not need JavaScript for everything

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

The value of progressive enhancement and semantic HTML
03:31 MIN

The value of progressive enhancement and semantic HTML

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

The industry's focus on frameworks over web fundamentals
11:32 MIN

The industry's focus on frameworks over web fundamentals

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

The only frontend stack that truly matters
11:10 MIN

The only frontend stack that truly matters

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Improving the developer feedback loop with specialized tools
03:16 MIN

Improving the developer feedback loop with specialized tools

Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof

Building collaborative design tools and the neo-brutalism trend
03:05 MIN

Building collaborative design tools and the neo-brutalism trend

Slopquatting, API Keys, Fun with Fonts, Recruiters vs AI and more - The Best of LIVE 2025 - Part 2

Navigating the growing complexity of modern CSS
09:00 MIN

Navigating the growing complexity of modern CSS

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

Featured Partners

Related Videos

See all videos
Building Interactive Async UI with React 19 and Ariakit25:22

Building Interactive Async UI with React 19 and Ariakit

Aurora Scharff

Building a component library for modern challenges29:44

Building a component library for modern challenges

Filip Rakowski

Building a framework-independent component library19:46

Building a framework-independent component library

Tobias Scholz

Dos and don'ts with react hooks. An opinionated approach20:16

Dos and don'ts with react hooks. An opinionated approach

Daniel Espino Garcia

Bringing back reactivity in "reactive" frontend28:43

Bringing back reactivity in "reactive" frontend

Michał Moroz

Rethinking React State Management: The Power of Built-In Solutions23:39

Rethinking React State Management: The Power of Built-In Solutions

Marc Brehmer

Component styling in a JS world — evolve your mental model41:28

Component styling in a JS world — evolve your mental model

Maximilian Heinrich

Interface Contracts in Microfrontend Architectures54:39

Interface Contracts in Microfrontend Architectures

Alexander Günsche

Related Articles

View all articles
BR
Benjamin Ruschin
The HTML Elements That You’re Probably Over-Engineering
As frameworks have become more and more commonplace in the world of web development, so too has the over-engineering of features made possible by our humble old friend, HTML. The mental models that come with using state management in React, Vue and o...
The HTML Elements That You’re Probably Over-Engineering

From learning to earning

Jobs that call for the skills explored in this talk.