How to Learn React API & Concepts with Sourcegraph Code Search

Tags: react, javascript, beginners, codesearch
Published: 2021-11-08 13:35:21

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](https://twitter.com/unicodeveloper/status/1454091302400835596) 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](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](https://dev.to/pmbanugo/looking-for-the-best-react-form-library-in-2021-it-s-probably-on-this-list-e2h). 

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](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](https://sourcegraph.com/search?q=context:global+kendo-react-form+lang:JavaScript+&patternType=literall)

 

**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](https://www.freecodecamp.org/news/beginners-guide-to-using-react-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](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](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](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](https://sourcegraph.com/search?q=context:global+static+getDerivedStateFromError&patternType=literal)



You can click on the [file](https://sourcegraph.com/github.com/streamich/react-use/-/blob/stories/useError.story.tsx?L12:3&subtree=true) 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](https://sourcegraph.com/search?q=context:global+.propTypes+%3D+%7B&patternType=literal)

A [structural search](https://learn.sourcegraph.com/how-to-search-with-sourcegraph-using-structural-patterns) 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](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](https://redux.js.org/faq/general). 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](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](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](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](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](https://twitter.com/acemarke/status/1021015625311838209?s=20). 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](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](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](https://github.com/sourcegraph/sourcegraph/tree/main/client/browser) 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.


![Browser](https://res.cloudinary.com/unicodeveloper/video/upload/v1636379879/BrowserShortcutDark_qbuc3y.gif)


## 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](https://speakerdeck.com/unicodeveloper/code-search-with-laravel-and-sourcegraph) at [ReactAdvanced London](https://reactadvanced.com). For more information about Sourcegraph search queries, check out [https://learn.sourcegraph.com/tags/search](https://learn.sourcegraph.com/tags/search)


[Furthermore, sign up](https://sourcegraph.com/sign-up) on Sourcegraph [to connect and search your private code.](https://learn.sourcegraph.com/how-to-add-private-code-repositories-to-sourcegraph)

---

Have suggestions or questions? Leave a comment, or join our [Community Slack Space](https://about.sourcegraph.com/community/?utm_medium=social&utm_source=devto&utm_campaign=slacklaunch) where our team will be happy to answer any questions you may have about Sourcegraph.