Search code examples
reactjsbitwise-or

What does this "|" symbol stand for in the React Documentation?


I am trying to understand the React source code, and many files within the code base lead me to the shared/ReactTypes.js file.

Within this file, there is a symbol "|"

From my own research, I found out that this is the bitwise OR (|) operator and the MDN documentation explaining this operator states that it:

returns a 1 in each bit position for which the corresponding bits of either or both operands is 1.

This didn't make any sense to me, so I continued to do some research on the web including Google and Stackoverflow, and I cannot find anything related to it's functionality in React's source code here..

export type ReactNode =
  | React$Element<any>
  | ReactPortal
  | ReactText
  | ReactFragment
  | ReactProvider<any>
  | ReactConsumer<any>;

Can anyone explain this to me or at minimum send me some resources to help me grasp what's happening in this React source code.

Also, if you know of any ways to reproduce this code, please let me know.

Thanks in advance!!


Solution

  • That file is a Flow typing file, and not vanilla JavaScript, so the MDN documentation doesn't stand in that sense. (In fact, it can't be parsed as regular JavaScript anyway; export type is not a thing in JavaScript.)

    The | operator in Flow denotes an union type.

    (The TypeScript typing file for React has an equivalent, if not exactly the same, pattern.)