”;
React JS is a JavaScript library for building user interfaces. React allows developers to create interactive UI components efficiently. So this reference attempts to document every built-in function, hooks, components, and other essential functionalities provided by React JS. In this tutorial we will use the React@18 version.
In the React JS, functions are organized into two main sections based on their functionalities and usage. Here are the main functions in React JS
Built-in Hooks
In this we have included all the built-in hooks which can be used with different React features in your components.
S.No | Function & Description |
---|---|
1 | use()
Lets us read the value of a resource. |
2 | useDebugValue()
Add a label to a custom Hook. |
3 | useDeferredValue()
Lets us defer updating a portion of the User Interface. |
4 | useId()
Use for generating unique IDs. |
5 | useImperativeHandle()
Helps us connect with a child component. |
6 | useInsertionEffect()
Allows us for inserting elements into the DOM. |
7 | useLayoutEffect()
Used to perform the layout measurements. |
8 | useSyncExternalStore()
Lets us subscribe to an external store. |
9 | useTransition()
Help us to update the state without blocking the UI. |
Built-in Component
In this we have documented components you can use in your code and other components as well.
S.No | Function & Description |
---|---|
1 | <Suspense>
Display a fallback until its children have finished loading. |
Built-in React APIs
There are some built-in APIs React provides which are useful for defining components.
S.No | Function & Description |
---|---|
1 | cache()
Cache the result of a data fetch. |
2 | createContext()
It creates a context that components can provide. |
3 | lazy()
Allows us to delay loading a component”s code. |
4 | startTransition()
Update the state without blocking the UI. |
Directives
These are the instructions for bundlers compatible with React Server Components.
S.No | Function & Description |
---|---|
1 | use client
Used to mark what code runs on the client. |
2 | use server
It is used to mark server-side functions. |
Built-in React DOM Hooks
There are some built-in React DOM hooks which run in the browser DOM environment. These Hooks are not best fit for non browser environments like Android, iOS, and Windows applications.
S.No | Function & Description |
---|---|
1 | useFormState()
Update state as per the result of a form action. |
2 | useFormStatus()
Gives status information of the last form submission. |
Event Handling Functions
In this section we have included some event handling functions that supports all built−in HTML and SVG components.
S.No | Function & Description |
---|---|
1 | event object
Acts as a link between our code and the browser events. |
2 | AnimationEvent handler
An event handler type for the CSS animation events. |
3 | ClipboardEvent handler
It is an event handler type for the Clipboard API events. |
4 | CompositionEvent handler
It is an event handler type for the input method editor events. |
5 | DragEvent handler
Event handler type for the HTML Drag and Drop API events. |
6 | FocusEvent handler
An event handler type for the focus events. |
7 | InputEvent handler
An event handler type for the onBeforeInput event. |
8 | KeyboardEvent handler
Handles events for keyboard events. |
9 | MouseEvent handler
An event handler type for mouse events. |
10 | PointerEvent handler
It is an event handler type for pointer events. |
11 | TouchEvent handler
Event handler type for touch events. |
12 | TransitionEvent handler
An event handler type for the CSS transition events. |
13 | UIEvent handler
Event handler type for generic User Interface events. |
14 | WheelEvent handler
An event handler type for the onWheel event. |
React DOM APIs
The react-dom package contains methods that are only supported for the web applications. In this section we have included APIs, Client APIs and server APIs.
S.No | Function & Description |
---|---|
1 | createPortal()
Get the current Axes instance. |
2 | flushSync()
Create a new Axes instance. |
3 | findDOMNode()
Close the current figure. |
4 | createRoot()
Clear the current figure. |
5 | hydrateRoot()
Check if a figure with a given figure number exists. |
6 | renderToReadableStream()
Create a new figure. |
7 | renderToString()
Get the current figure. |
8 | renderToStaticMarkup()
Get the labels of all figures. |
9 | cloneElement()
Set the current Axes instance to a given axes. |
10 | isValidElement()
Add contour labels to a contour plot. |
11 | PureComponent
It is an enhanced version of the regular Component. |
Other Class components
These components are the base class for the React components defined as JavaScript classes. Class components are still supported by React so we have included them in the below section.
S.No | Function & Description |
---|---|
1 | componentDidCatch()
Used to call when some child component throws an error. |
2 | componentDidUpdate()
Used to call immediately after component has been re−rendered. |
3 | componentWillUnmount()
Call it before your component is removed. |
4 | forceUpdate()
Forces a component to re-render. |
5 | getChildContext()
Specify the values for the legacy context. |
6 | getSnapshotBeforeUpdate()
Enables your component to capture some information. |
7 | static contextType
Lets us specify which legacy context is consumed. |
8 | static defaultProps
Used to set the default props for the class. |
9 | static propTypes
To declare the types of the props accepted by your component. |
10 | static getDerivedStateFromError()
Call it when a child component throws an error during rendering. |
11 | static getDerivedStateFromProps()
Used to call it right before calling render. |
12 | UNSAFE_componentWillMount()
It is a lifecycle method that runs during server rendering. |
13 | UNSAFE_componentWillReceiveProps()
Used to call when the component receives new props. |
14 | UNSAFE_componentWillUpdate()
Call it before rendering with the new props or state. |
15 | createElement()
Create a React element for an alternative to writing JSX. |
16 | createRef()
Creates a ref object to contain arbitrary value. |
Test Utilities
Test Utilities are used to make it easy to test React components in the testing framework of your choice. In this section we have included some function to do perform testing.
S.No | Function & Description |
---|---|
1 | act()
To wrap code that interacts with component. |
2 | mockComponent()
To create a mock version of a React component. |
3 | isElement()
Checks if a given object is a React element. |
4 | isElementOfType()
Checks if a given object is an element of a specific type. |
5 | isDOMComponent()
Checks if a given object is a DOM component. |
6 | isCompositeComponent()
Checks if a given object is a composite component. |
7 | isCompositeComponentWithType()
Checks given object is a composite component of a specific type. |
8 | findAllInRenderedTree()
Finds all rendered instances of a component in tree. |
9 | scryRenderedDOMComponentsWithClass()
Finds all DOM components with a specific class. |
10 | findRenderedDOMComponentWithClass()
Finds the first DOM component with a specific class in the rendered tree. |
11 | scryRenderedDOMComponentsWithTag()
Finds all DOM components with a specific tag. |
12 | findRenderedDOMComponentWithTag()
Finds the first DOM component with a specific tag. |
13 | scryRenderedComponentsWithType()
Finds all composite components of a specific type. |
14 | findRenderedComponentWithType()
Finds the first composite component of a specific type. |
15 | renderIntoDocument()
Renders a React component into the DOM. |
16 | Simulate()
Used to simulate user interactions. |
Test Renderer
The Test Renderer is a utility for rendering React components to pure JavaScript objects, without the need for a DOM. In this section we have included some functions for this utility.
S.No | Function & Description |
---|---|
1 | TestRenderer.create()
Renders a React component in a test renderer instance. |
2 | TestRenderer.act()
Executes interactions with the test renderer. |
3 | testRenderer.toJSON()
Returns a JSON representation of the rendered component tree. |
4 | testRenderer.toTree()
Returns a tree structure showing the rendered component tree. |
5 | testRenderer.update()
Manually triggers an update on the rendered component. |
6 | testRenderer.unmount()
Unmounts the rendered component. |
7 | testRenderer.getInstance()
Returns the instance of the root component. |
8 | testRenderer.root()
Provides access to the root node of the component tree. |
9 | testInstance.find()
Finds nodes in the component tree. |
10 | testInstance.findByType()
Finds nodes in the component tree as per their type. |
11 | testInstance.findByProps()
Finds nodes in the component tree as per their props. |
12 | testInstance.findAll()
Finds all nodes in the component tree. |
13 | testInstance.findAllByType()
Finds all nodes in the component tree based on their type. |
14 | testInstance.findAllByProps()
Finds all nodes as per their props. |
15 | testInstance.instance
Represents the actual instance of the component. |
16 | testInstance.type
Represents the type of the component. |
17 | testInstance.props
Represents the props passed to the component. |
18 | testInstance.parent
Represents the parent node in the component tree. |
19 | testInstance.children
Shows the children nodes in the component tree. |
”;