jerrycruncher

10 maanden geledendiscuss

This is a really canonical example of a "Yet you participate in a society. Curious!" post. Well done.

[0] https://imgur.com/we-should-improve-society-somewhat-T6abwxn

jerrycruncher

7 jaar geledendiscuss

Sure. The app I'd been working on had previously been using the original 'render prop' style of accessing context in functional components and using the this.contextType accessor for class-based components. Both approaches had their downsides:

- 'render props' are fairly awkward to write, and add a lot of noise to a component that's working with data from multiple contexts.

- this.contextType can only give a component access to one context. This is a pretty big problem.

With Hooks, useContext lets you reference and destructure contexts in a really elegant way. Say you want to show a user's name if they're logged in, with the render prop approach it's something like:

  <AuthContext.Consumer>
    {({ isLoggedIn } => {
      return (<div> {isLoggedIn && <span>i'm logged in</span>} </div>)
    })}
  </AuthContext.Consumer>

with useContext, you can do

  const { isLoggedIn } = useContext(AuthContext);

and then use

  {isLoggedIn && ...}

to condtionally render anywhere in the body of your component without all the Context.Consumer business.

jerrycruncher

7 jaar geledendiscuss

I agree that if you had a large (in the dozens, if not hundreds) number of dependent components, it could be an issue. However, I've noticed no performance degradation with my usage -- I use a top-level AuthContext component to handle user data/login state, and another for access/caching of the app's main data.

In a single view (for lack of a better term), I'd guess the largest number of components that access either context is six.

jerrycruncher

7 jaar geledendiscuss

I've completely stopped using class components after spending some time with Hooks in a small-to-mid-sized application.

The big wins for me were:

- passing an empty array as the last argument of useEffect makes useEffect work in a similar fashion to the old ComponentDidMount. You can have any number of useEffect invocations in a component, and for a component that is, say, loading data from two different sources, I find having two discrete useEffects loading just what they need much more clean/intentional than putting everything into a single lifecycle method.

- using Hooks with Context almost completely fills the giant state management hole that has been (imo) hampering React since its inception. Hooks + Context is a cleaner and more comprehensible solution than React + Redux for any application that has a reasonable amount of state complexity. For data-heavy applications, Redux may still be a good choice, but for everything else, the Hooks + Context combination is hard to beat.

comments