In React, it's common for libraries, and app-internal utilities, to used context-based dependency injection. Some examples:

function MyComponent() {
  const client = useApolloClient(); // Apollo
  const store = useStore(); // React-Redux
  const { me, logout } = useContext(AuthContext); // utilities
  // etc..

I wonder, has anybody seen serious (or any for that matter) usage of the same technique for dependency injection of UI components? Would/could it solve any particular problem out there?

function MyComponent() {
  const { Button, TabBar, Header, NavList } = useContext(UIContext);
  // etc.

Some thoughts:

  • I've once written a hook that returns a component definition (instead of just some jsx), because I wanted to dynamically generate some component dynamically depending on state, but also to be able to render multiple of them.

  • In the typical theme use-case, I imagine it would just be a bit of an inversion of control, where instead of "consuming and applying the theme", you would be "letting the theme itself deal with it"

    // consuming/applying theme from context
    const { colors } = useTheme();
    return <button style={{ color: colors.primary }}>hello</button>;
    // let the
    const { Button } = useThemedComponents();
    return <Button>hello</Button>;


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.