React is one of the commonly used UI libraries that has been around for a long time (in programming years). It’s sometimes called a frontend framework because of the plethora of resources available to build smooth, performant and snappy user interfaces. In addition, it has a vibrant and robust community of developers.

There are many ways to learn React, and one of such effective ways is by delving right into different code implementations of the concepts you want to know.

A quick Twitter thread shows the common concepts folks search for while learning React. In this article, you’ll understand how to leverage Sourcegraph code search in learning certain React concepts.

Note: The React team recently launched https://beta.reactjs.org/learn. It’s really good!

1. React and Forms

Virtually every UI is a combination of form elements. As a frontend developer, you’ll deal with tons of forms.

I like this excellent article about React and Form libraries.

With Sourcegraph, you can ramp up using these form libraries while reading articles and the library documentation. Thus, Sourcegraph can serve as your code assistant to help you learn faster.

Search for Formik:

Formik lang:JavaScript

Search Query: https://sourcegraph.com/search?q=context:global+from+%22Formik%22+lang:JavaScript+&patternType=literal

Search for Kendo React Form:

kendo-react-form lang:JavaScript

Search Query: https://sourcegraph.com/search?q=context:global+kendo-react-form+lang:JavaScript+&patternType=literal

Recommendation: Use Sourcegraph to search for the other form libraries you want to understand.

2. State Management Hooks

State management is an extensive topic in frontend development. In the React world, it can be overwhelming and a lot to deal with, especially as a newbie. The way you approach state management mostly depends on the complexity of your app.

As a React frontend developer, you’ll need to learn about hooks at some point. Hooks are regular functions that allow you to use React state and features without defining a class.

Common hooks you’ll come across are useState, useEffect, useRef, useCallback, useMemo, useContext, and useReducer.

A lot of the React codebase you’ll come across make use of useRef. In that case, let’s discover how developers are using useRef and useState in various apps and projects.

React.useRef() lang:JavaScript

Search Query: https://sourcegraph.com/search?q=context:global+React.useRef%28%29+lang:JavaScript+&patternType=literal

useRef lang:JavaScript

Search Query: https://sourcegraph.com/search?q=context:global+useRef+lang:JavaScript+&patternType=literal

Search for the usage of both useState and useRef:

useState AND useRef lang:JavaScript

Search Query: https://sourcegraph.com/search?q=context:global+useState+AND+useRef+lang:JavaScript+&patternType=literal

Recommendation: Use Sourcegraph to find how other hooks are used.

3. Error Boundaries

React 16 introduced error boundaries as React components that catch JavaScript errors during rendering anywhere in their child component tree. These components also log the errors and display a fallback UI.

A class component becomes an error boundary if it defines either (or both) of the lifecycle methods static getDerivedStateFromError() or componentDidCatch().

Use static getDerivedStateFromError() to render a fallback UI after an error has been thrown and componentDidCatch() to log error information.

Let’s discover how error boundaries are used in different projects with Sourcegraph:

static getDerivedStateFromError

Search Query: https://sourcegraph.com/search?q=context:global+static+getDerivedStateFromError&patternType=literal

You can click on the file to read the complete code.

4. PropTypes

PropTypes are React’s way of providing type checking to your components. With React PropTypes, you can set the types for your props to avoid unexpected behavior.

We’ll perform two types of searches for propTypes to give us a lot of context on how developers use PropTypes in their codebase.

A literal search:

.propTypes = {

Search Query: https://sourcegraph.com/search?q=context:global+.propTypes+%3D+%7B&patternType=literal

A structural search for propTypes should give us results of how propTypes like so:

.propTypes = { ... }

Search Query: https://sourcegraph.com/search?q=context:global+.propTypes+%3D+%7B+...+%7D&patternType=structural

Recommendation: Use Sourcegraph to find out how props are used in apps.

5. Redux

I have talked with a lot of developers about Redux. Most of their pain points come with understanding how to learn Redux the right way. Questions I hear on repeat are:

• Where do I start?
• What are all the libraries and middleware I need to know Redux?
• Why are there so many options?
• Why is Redux so complex?
• What tools are required to debug Redux in my apps?

I don’t have answers to these questions, but the official Redux guide has done an excellent job providing step-by-step tutorials and FAQ. You can also leverage Sourcegraph in finding Redux resources and speeding up your learning. Let’s try!

First Query:

built with redux 

https://sourcegraph.com/search?q=context:global+built+with+redux&patternType=literal

Second Query:

built with react redux 

https://sourcegraph.com/search?q=context:global+built+with+react+redux&patternType=literal

We can find how standard Redux toolkit APIs are used:

Third Query:

createAsyncThunk 

https://sourcegraph.com/search?q=context:global+createAsyncThunk&patternType=literal

This query returns a lot of results about the usage of the createAsyncThunk’s API.

However, there’s also a ton of markdown files in the response. Let’s exclude markdown files from showing up with another query:

Search Query:

createAsyncThunk -file:\.md|.mdx$

The file keyword ensures it looks for files ending .md or .mdx. -file: excludes them from the search results.

https://sourcegraph.com/search?q=context:global+createAsyncThunk+-file:%5C.md%7C.mdx%24+&patternType=literal

Recommendation: Use Sourcegraph to find out how createSlice, createApi and other Redux APIs are used in React apps.

Note: I came across a tweet from one of the Redux maintainers. I found an answer to the question with the following search query:

Search Query: https://sourcegraph.com/search?q=context:global+lang:JavaScript+connect%5C%28+pure:%5Cs*false&patternType=regexp

6. How to find React error messages with Sourcegraph.

Sourcegraph is an excellent tool to find reasons behind specific error messages that pop up during React development.

A common error you might have encountered is Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

This error message pops up when re-rendering repeatedly occurs, especially when a method that uses setState is called in the render method. You can find the origin of this method with Sourcegraph.

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Search Query: https://sourcegraph.com/search?q=context:global+Maximum+update+depth+exceeded.+This+can+happen+when+a+component+repeatedly+calls+setState+inside+componentWillUpdate+or+componentDidUpdate.+React+limits+the+number+of+nested+updates+to+prevent+infinite+loops.&patternType=literal

In the search results, you can find where and how this React error message pops up!

Code Search in Your Default Browser

The Sourcegraph browser extension adds code intelligence to files and diffs on GitHub, GitHub Enterprise, GitLab, Phabricator, and Bitbucket Server.

After installation, it provides the following:

• Code Intelligence: A tooltip is displayed when you hover over code in pull requests, diffs, and files with:

  • Documentation and the type signature for the hovered token.
  • Go to definition button.
  • Find references button.

• A search engine shortcut in your web browser that performs a search on your Sourcegraph instance.

Conclusion

Learning how to use a new library or framework can be challenging, but with the right tools, you can speed up this process and get a better understanding of how different components can be connected.

If you'd like to learn more about Sourcegraph code search, I recently presented a talk about advanced code search at ReactAdvanced London. For more information about Sourcegraph search queries, check out https://learn.sourcegraph.com/tags/search

Furthermore, sign up on Sourcegraph to connect and search your private code.

Have suggestions or questions? Leave a comment, or join our Community Slack Space where our team will be happy to answer any questions you may have about Sourcegraph.