
React's component-driven design simplifies reusing UI because blocks of markup can be encapsulated into custom components. Likewise, sharing traditional data utilities is straightforward because React is “Just JavaScript”™. But what about when we want to **share stateful logic and behavior** between components while letting them control some or all of the UI?

React has had several approaches over its lifetime to solve this problem:

- Mixins (legacy)
- `as` props
- Higher-order components (HOCs)
- Compound components
- Render props
- Custom hooks

Each pattern has its pros and cons. And even with hooks, there are still **ideal use cases for all of the patterns**.

Hi, I’m Ben Ilegbodu 👋🏾. In this minishop, not only will we learn how to write these patterns for sharing stateful logic, but we will also learn the best situations to apply these patterns in your codebase. You will be able to **replace your unnecessarily complex components** filled with dozens of configuration props and code branches with **powerful components with flexible APIs**.

## Get ready to

- Support **`as` props** for minimal UI flexibility
- Add **render props** to invert UI rendering control
- Create **compound components** to provide layout control
- Leverage **custom hooks** when no shared UI is needed
- ...and many more techniques for creating reusable components

## You’ll need to have

- Experience building React applications with `useState` & `useEffect` hooks
- Experience creating custom hooks
- Experience with advanced hooks like `useContext` & `useCallback` will also be helpful

## This minishop may not be for you if you

- Are still new to React (try the [Zero to React with Hooks](/minishops/zero-to-react-with-hooks/) minishop instead)
- Have React experience, but don’t yet have experience using hooks (consider the [Migrating to React Hooks](/minishops/migrating-to-react-hooks/) minishop instead)

## Code of Conduct

By participating in this minishop, you are agreeing to the [Minishop Code of Conduct](/minishops/conduct/).

## What are “minishops”?

Minishops by Ben Ilegbodu are fully-remote workshops that last about 3 hours. They're highly-focused, covering only the concepts you want to learn so that you can level up your skills and get on with the rest of your day. By keeping it short, you’re able to absorb and retain the information before fatigue sets in and other distractions get in your way.

To learn more about minishops, read the [Introducing Minishops](/blog/introducing-minishops/) blog post.

## Questions

If you have questions about the minishop, feel free to email us at [team@benmvp.com](mailto:team@benmvp.com).


Learn how to write reusable React components using patterns for sharing stateful logic and behavior

Sharing React Component Logic


React is continually improving and evolving. React Hooks are a leap forward in how we develop components and manage state in our React applications. Now you can use state and other React features without having to write a class!

Many React developers have switched from classes to React Hooks and are realizing the benefits of understanding their apps better because:

- Related logic is now located together
- Less code is needed compared to the equivalent class
- Function components better align with React’s mental model
- Hooks are just awesome! 🎉

Do you have a codebase filled with class components? You could leave it that way, but it will become increasingly more “legacy” as time continues to pass by. **Why not change now?**

Is your team still not developing with React hooks? The longer you stick with the “old way,” the harder it will be to change when you need to. **Why not change now?**

Hi, I’m Ben Ilegbodu 👋🏾. In this minishop, not only will you learn the ins and outs of React Hooks, but also how to switch to React Hooks from class lifecycle methods, bringing your codebase and your team into the modern React era.

## Get ready to

- Switch from `setState` to the `useState` hook
- Make API calls with the `useEffect` hook instead of the `componentDidMount`, `componentDidUpdate` & `componentWillUnmount` lifecycle class methods
- Create custom hooks to reuse and compose logic
- Use function closures instead of `this` & `.bind` for callbacks and event handlers
- ...and many other features to help you write modern React code

## You’ll need to have

- Prior experience building React applications, specifically using classes
- Experience with modern JavaScript syntax and asynchronous patterns like `Promise` & `async`/`await`

## This minishop may not be for you if you

- Are still new to React (consider the [Zero to React with Hooks](/minishops/zero-to-react-with-hooks/) minishop instead)
- Already have dabbled with React Hooks (consider the [Sharing React Component Logic](/minishops/sharing-react-component-logic/) minishop instead)

## Code of Conduct

By participating in this minishop, you are agreeing to the [Minishop Code of Conduct](/minishops/conduct/).

## What are “minishops”?

Minishops by Ben Ilegbodu are fully-remote workshops that last about 3 hours. They're highly-focused, covering only the concepts you want to learn so that you can level up your skills and get on with the rest of your day. By keeping it short, you’re able to absorb and retain the information before fatigue sets in and other distractions get in your way.

To learn more about minishops, read the [Introducing Minishops](/blog/introducing-minishops/) blog post.

## Questions

If you have questions about the minishop, feel free to email us at [team@benmvp.com](mailto:team@benmvp.com).


Learn how to migrate to React Hooks from classes for a better way to develop components and manage state in React applications

Migrating to React Hooks


TypeScript is a JavaScript superset that compiles down to vanilla JavaScript and has become increasingly popular. TypeScript offers strong typing and compile-time verification to our React applications. As a result, using TypeScript helps eliminate entire classes of bugs that commonly affect our apps.

When adopting new tech for development, we should always focus on the impact to the user. The user doesn’t care what tech we use unless it makes their user experience better (less friction, more delightful, etc.). Users definitely do not want a buggy experience, and of course, neither do we.

Hi, I’m Ben Ilegbodu 👋🏾. In this minishop, you will learn how to use TypeScript to build React applications. But instead of simply covering types and syntax, the minishop will have a focus on how using TypeScript can prevent common bugs that infect our applications.

Maybe you’re concerned about the code health of your app and what to learn how **TypeScript can provide confidence** in making big changes. Or maybe your team is building a new React application and you want to see if **TypeScript makes sense** before kicking off the project. Or maybe you’re just questioning whether **TypeScript is worth the learning curve** when you’re already productive building React applications.

Whether these are your reasons or you have others, you’ll no doubt leave convinced that TypeScript will help you in your current or future React projects.

## Get ready to

- Learn basic TypeScript types and syntax
- Define fully type-safe component props
- Type common React hooks
- Handle forms and other events
- ...and many more features that help you write quality code

## You’ll need to have

- No prior experience with TypeScript is necessary! 🙌🏾
- Experience building React applications using hooks (consider taking the [Migrating to React Hooks](/minishops/migrating-to-react-hooks/) or [Zero to React with Hooks](/minishops/zero-to-react-with-hooks/) minishops first)

## This minishop may not be for you if you

- Already have some experience using TypeScript in React (try the [Sharing React Component Logic](/minishops/sharing-react-component-logic/) minishop)
- Have React experience, but don’t yet have experience using hooks (again consider the [Migrating to React Hooks](/minishops/migrating-to-react-hooks/) minishop instead)

## Code of Conduct

By participating in this minishop, you are agreeing to the [Minishop Code of Conduct](/minishops/conduct/).

## What are “minishops”?

Minishops by Ben Ilegbodu are fully-remote workshops that last about 3 hours. They're highly-focused, covering only the concepts you want to learn so that you can level up your skills and get on with the rest of your day. By keeping it short, you’re able to absorb and retain the information before fatigue sets in and other distractions get in your way.

To learn more about minishops, read the [Introducing Minishops](/blog/introducing-minishops/) blog post.

## Questions

If you have questions about the minishop, feel free to email us at [team@benmvp.com](mailto:team@benmvp.com).


Learn how to use strong types with TypeScript in React applications to prevent common bugs that infect our apps

TypeScript for React Developers


React is a JavaScript UI library that makes creating reusable components easy and efficient. It’s critical to understand the fundamentals of creating custom configurable components, fetching and maintaining state, and rendering UI based upon that state and component configurations.

Maybe your team is **taking on a new React project** and you want to get a handle on React development before your kick off the project. Or maybe you are just starting off your development career and want to learn React in order to **increase your job opportunities**. Or maybe you’ve been in the industry for a while, heard so much about React, and finally want to **see what React is all about**.

Whatever the case may be, you’ll leave the minishop with all the fundamentals you need to build your own modern apps with React using hooks.

## Get ready to

- Write configurable, reusable and composable components
- Use JSX syntax
- Work with the “Virtual DOM”
- Handle user interactions and synthetic events
- Maintain application state using hooks
- Make API calls using hooks
- Apply component styling
- ...and many more tidbits and nuances of quality React development

## You’ll need to have

- No prior experience with React is necessary! 🙌🏾
- Experience building web user interfaces with HTML, CSS, and JavaScript DOM APIs
- Experience with modern JavaScript syntax and asynchronous patterns like `Promise` & `async`/`await`

## This minishop may not be for you if you

- Already have experience developing in React with class components (consider the [Migrating to React Hooks](/minishops/migrating-to-react-hooks/) minishop instead)
- Already have dabbled with React Hooks (consider the [Sharing React Component Logic](/minishops/sharing-react-component-logic/) or [TypeScript for React Developers](/minishops/typescript-for-react-developers/) minishops instead)

## Code of Conduct

By participating in this minishop, you are agreeing to the [Minishop Code of Conduct](/minishops/conduct/).

## What are “minishops”?

Minishops by Ben Ilegbodu are fully-remote workshops that last about 3 hours. They're highly-focused, covering only the concepts you want to learn so that you can level up your skills and get on with the rest of your day. By keeping it short, you’re able to absorb and retain the information before fatigue sets in and other distractions get in your way.

To learn more about minishops, read the [Introducing Minishops](/blog/introducing-minishops/) blog post.

## Questions

If you have questions about the minishop, feel free to email us at [team@benmvp.com](mailto:team@benmvp.com).


An introduction to React to learn the critical concepts needed for building modern React applications using hooks