Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Where does React's `scryRenderedDOMComponentsWithClass` method name come from?

Tags:

reactjs

Working on testing a React component, I was reading the docs and found scryRenderedDOMComponentsWithClass. I'm having trouble understanding the function of this component because it's unpronounceable, so I don't understand how it's naming maps to a mental model of what it's doing. (There are a number of related names, such as scryRenderedDOMComponentsWithTag.)

What does the scry part of this method name refer to? Scary? Scurry? What concept is this name trying to illustrate?

like image 413
nickcoxdotme Avatar asked Nov 16 '15 19:11

nickcoxdotme


People also ask

Who created React?

React was originally created by Jordan Walke. Today, React has over a thousand open source contributors.

What is React JS in simple words?

The React. js framework is an open-source JavaScript framework and library developed by Facebook. It's used for building interactive user interfaces and web applications quickly and efficiently with significantly less code than you would with vanilla JavaScript.

What is componentDidMount?

The componentDidMount() method allows us to execute the React code when the component is already placed in the DOM (Document Object Model). This method is called during the Mounting phase of the React Life-cycle i.e after the component is rendered.

What is Dom in React JS?

What is the DOM? The DOM (Document Object Model) represents the web page as a tree structure. Any piece of HTML that we write is added as a node, to this tree. With JavaScript, we can access any of these nodes (HTML elements) and update their styles, attributes, and so on.


1 Answers

Short answer

"Scry" in this context just means "find all". See this comment on ReactTestUtils.scryRenderedComponentsWithClass. It's a single word, not an abbreviation, and it's pronounced like "cry" but with an "s" at the beginning.

Longer (and nerdier) answer

Elsewhere in that same file, you'll see a reference to DOM.scry:

/**  * Todo: Support the entire DOM.scry query syntax. For now, these simple  * utilities will suffice for testing purposes.  * @lends ReactTestUtils  */ 

zpao explains in a comment on a GitHub issue:

That's a reference to an internal Facebook module. It's basically querySelectorAll with fallback behavior for handling old browsers and special cases. It is pretty unremarkable and doesn't actually translate super well here (except maybe a scryRenderedDOMComponentsWithQSA or something, but meh). We're working on improving the testing in other ways so I don't think there's anything we really want to do with this right now.

jimfb takes it a bit further in another GitHub issue, explaining that the name is a reference to Dungeons & Dragons:

Back in the day, we had a bunch of D&D fans on the team.

For reference:
http://www.dandwiki.com/wiki/SRD:Scrying
http://www.dandwiki.com/wiki/SRD3e:Scry_Skill
https://en.wikipedia.org/wiki/Scrying

Historically, we've used scry to indicate a helper that finds a set of results. As the framework matures, we should start choosing function names based on what the functions actually do instead of fantasy words that have very little meaning to the typical developer.

Though I would agree that the word has very little meaning to most, it's worth noting that "scry" is a real English word:

scry
[skrahy]

verb (used without object), scried, scrying.

  1. to use divination to discover hidden knowledge or future events, especially by means of a crystal ball.

Interestingly, according to the data from Google's Ngram Viewer, it seems that the word fell out of normal usage in the early 19th century and then wallowed in obscurity until the 1980s, presumably after D&D gained popularity:

Google Ngram Viewer: "scry" from 1700 to 2008

So I can't say I object to jimfb calling it a "fantasy word", especially considering the kind of imagery my imagination conjures up when I hear it.

like image 184
peterjmag Avatar answered Oct 07 '22 09:10

peterjmag