DEV Community

Discussion on: Passing Data Between React Components

Collapse
 
iq9 profile image
Russ Brooks

Another problem with Context. It's implicit. Props are explicit. Context isn't easily discoverable, in code, in the traditional ways. In this code I’m in, we have this line.

const { currentActiveLink } = useContext(NavigationContext);
Enter fullscreen mode Exit fullscreen mode

That’s clearly the “Consumer” side of this communication (the “Get” side). How does one find, in code, the Producer side ("set" side)?

For 100% of developers, the traditional way to discover that, is to do global searches for 3 things you see on the line above: currentActiveLink, useContext, and NavigationContext. I do that, and I get 0 results - nothing is setting that value. (Undiscoverable React magic, exactly like Active Record’s magic methods.) When I was first learning React, this baffled me for months. The React docs just tell you what Context is, but give you no clear examples on the Setting and Consuming of Context. So even after reading them, I still had no idea what to "grep" for. Probably another reason why the React docs also advise against using Context.

Props, by contrast, 100% explicit. Easily findable in code by simply doing searches for those attributes:

<Welcome userName="sara" />
Enter fullscreen mode Exit fullscreen mode

Do a Find for "userName", and you'll immediately see the code where that userName was set.