Data Fetching is no doubt the most important part of React App, because React is data-driven. There are three types of Data Fetching:<ol><li>Static Generation</li><li>Server-side Rendering</li><li>Client-side Rendering</li></ol><figure class="image"><img src="https://images.unsplash.com/photo-1515524738708-327f6b0037a7?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=1080&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjExODA5M30"><figcaption>Photo by <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/@markusspiske?utm_source=unsplash-chrome-extension&amp;utm_medium=referral">Markus Spiske</a></figcaption></figure><h3>Static Generation</h3>Static Generation means the data is fetched at build time. For Next.js versions 9.3 and up, &nbsp;there are two unique functions, getStaticProps and getStaticPaths, which are running at build time to generate &nbsp;data saved in .next/static folder by default. And then those data (HTML and JSON files) will be directly loaded when the page loads, which will certainly increase the performance. &nbsp;The getStaticPaths is used to specify dynamic routes, and define a list of paths that have to be rendered to HTML at build time. &nbsp;We don't use getStaticPaths in DeNiApps, so let's skip this for now, and focus on getStaticProps. &nbsp;To use it, we can simply add the function like below:<pre><code class="language-javascript">export async function getStaticProps() {
 let data = null;
 try {
 const res = await fetch("https://api.tvmaze.com/search/shows?q=nba");
 data = await res.json();
 } catch (err) {
 console.log(err);
 }

 return {
 props: {
 shows: data ? data.map((entry) =&gt; entry.show) : [],
 },
 };
}</code></pre>Then the data retrieved from API will be passed to the page component as props.&nbsp;<h3>Server-side Rendering</h3>Server-side Rendering means the data is fetched on each request before rendering the page. In the React's early day, somewhere in 2015, &nbsp;people called this Universal Rendering:<blockquote>With the help of server side rendering the first rendering is never empty and performance is better.</blockquote>At that time, people used ReduxAsyncConnect, later ReductConnect, and then another popular one named <a target="_blank" rel="noopener noreferrer" href="https://github.com/markdalgleish/redial">redial</a>, and more. But none of them is as easy as NextJS. With NextJS, you only need to add getServerSideProps function into your pages, &nbsp;the function looks the same as getStaticProps. For example:<pre><code class="language-javascript">export async function getServerSideProps() {
 let posts = [];
 try {
 const result = await getPublicPosts();
 posts = result.data.data;
 } catch (error) {
 console.log(error);
 }

 return {
 props: { posts: posts }
 };
}</code></pre><h3>Client-side Rendering</h3>Client-side Rendering means the data is fetched after the page mounted. This is very common in React App when people don't care about Server-side Rendering. Also, in some cases, you may not be able to do Server-side, for example, when the data is only available to the user session, and the user session is saved on the client-side only, like using LocalStorage. In the Object-Oriented way, we can do the data fetching inside, ComponentDidMount, and in a functional way, since React.hook is available after 16.8, we can use useEffect, For example:<pre><code class="language-javascript">async componentDidMount() {
 const ret = await getTags(this.props.accessToken);

 const allTags = ret.data.data;
 const tagsInputOptions = allTags.map((item) =&gt; ({
 value: item.slug,
 text: item.name,
 key: item._id,
 }));

 const newAllOptions = {
 ...this.state.allOptions,
 tags: tagsInputOptions,
 };

 this.setState({ allOptions: newAllOptions });
 }</code></pre>Or:<pre><code class="language-javascript"> useEffect(() =&gt; {
 fetchList();
 setTimeout(() =&gt; {
 setMessage("");
 }, 3000);
 }, []);</code></pre><h3>Final Notes</h3><ul><li>getStaticProps /getServerSideProps has to be used in the page level, not in the component level. &nbsp;So you should use it in any pages (i.e., under pages folder in NextJS.)</li><li>In DEV env, (i.e., npm run dev) the getStaticProps is executing like getServerSideProps.</li><li>getStaticProps is only executed at build time, so it may not work for you, your page is dynamically changed, for example, in DeNiApps, the blog list page have to use getServerSideProps instead of getStaticProps, because we don't want to rebuild the website every time we publish a new post.</li><li>both <a target="_blank" rel="noopener noreferrer" href="https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation">getStaticProps</a>/<a target="_blank" rel="noopener noreferrer" href="https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering">getServerSideProps</a> get context parameter pass in, which includes ‘params’, ‘query’, etc. information, which you may need for the data fetching. Click the links to view details.</li><li>In NextJS 9.2 or older, we can use getInitialProps for server-side rendering. We can still use getInitialProps in NextJS9.3 or newer, especially, if you want to do server-side data fetching in _app.js, because we cannot do getStaticProps or getServerSideProps in _app.js.</li></ul><h3>Bonus Note</h3>The parameter for getInitailProps is different depending on whether we call it in page level or in _app.js, as the example below:<pre><code class="language-javascript">//in pages/home.js
Home.getInitialProps = async ({ req }) =&gt; {
 const md = new MobileDetect(req.headers["user-agent"]);
 const isMobileFromSSR = !!md.mobile();

 return {
 isMobileFromSSR,
 deviceInfo: {
 mobile: md.mobile(),
 tablet: md.tablet(),
 os: md.os(),
 userAgent: md.userAgent(),
 },
 };
};
//in pages/_app.js
deniApp.getInitialProps = async (appContext) =&gt; {
 const agent = appContext.ctx.req
 ? appContext.ctx.req.headers["user-agent"]
 : "";
 const md = new MobileDetect(agent);
 const isMobileFromSSR = !!md.mobile();
 return { isMobileFromSSR };
};</code></pre>As you see in page level, it's context.req, but in _app.js, it's appContex.ctr.req.&nbsp;

In this article, we introduce different ways to do the Data Fetching in a React App, especially with NextJS. You will learn something like, Static generation, Server-side rendering, and Client-side rendering.

Data Fetching In React App with NextJS

By default, the hyperlink is open in the same tab, which prevents too many tabs open in the browser leading to overtaxed computer memory, a reduction in battery life, and, for sure, a cluttered browser workspace. However, I believe that all external links should be open in a new tab, so the users won't leave your site accidentally.<figure class="image"><img src="https://images.unsplash.com/photo-1520970014086-2208d157c9e2?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=1080&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjExODA5M30"><figcaption>Photo by <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/@kellysikkema?utm_source=unsplash-chrome-extension&amp;utm_medium=referral">Kelly Sikkema</a></figcaption></figure>To do this in CKEditor 5 by using the Link plugin, we would need to make some configuration change.If you use CKEditor in an HTML code/template, you can update your create function like this:<pre><code class="language-javascript">ClassicEditor
 .create( document.querySelector( '#editor' ), {
 // ...
 link: {
 decorators: {
 addTargetToExternalLinks: {
 mode: 'automatic',
 callback: url =&gt; /^(https?:)?\/\//.test( url ),
 attributes: {
 target: '_blank',
 rel: 'noopener noreferrer'
 }
 }
 }
 }
 } )
 .then( ... )
 .catch( ... );</code></pre>If you use CKEditor with React, then update your component like this:<pre><code class="language-javascript">import React, { Component } from "react";
import PropTypes from "prop-types";
import CKEditor from "@ckeditor/ckeditor5-react";
import ClassicEditor from "ckeditor5-build-classic-dna";

class CKEditor5 extends Component {
 static get propTypes() {
 return {
 value: PropTypes.string,
 onChange: PropTypes.func,
 };
 }

 render() {
 return (
 &lt;CKEditor
 editor={ClassicEditor}
 data={this.props.value}
 config={{
 link: {
 decorators: {
 addTargetToExternalLinks: {
 mode: "automatic",
 callback: (url) =&gt; /^(https?:)?\/\//.test(url),
 attributes: {
 target: "_blank",
 rel: "noopener noreferrer",
 },
 },
 },
 },
 }}
 onChange={(event, editor) =&gt; {
 const data = editor.getData();
 this.props.onChange(data);
 //console.log({ event, editor, data });
 }}
 /&gt;
 );
 }
}

export default CKEditor5;
</code></pre>After this, link decorators are adding target="_blank" and rel="noopener noreferrer" attributes to all external links in the document, keep the internal links open in the same tab.<h3>Final Note&nbsp;</h3>In the React Component example, we use &nbsp;ClassicEditor from "ckeditor5-build-classic-dna", which includes code block &amp; insert image url plugins, you can install it from: <a target="_blank" rel="noopener noreferrer" href="https://www.npmjs.com/package/ckeditor5-build-classic-dna">https://www.npmjs.com/package/ckeditor5-build-classic-dna</a>Happy Editing :-)

How to set the external links to be open in the new tab by default, i.e., set target=_blank in CKEditor 5? This short note shows you how to set the configuration in CKEditor 5 on both in HTML code and React Component.

Open External Links in New Tab for CKEditor

CKEditor 5 does not ship with Code Blocks by default, but it could be added via custom build. The simplest way to use it is from <a target="_blank" rel="noopener noreferrer" href="https://www.npmjs.com/package/ckeditor5-build-classic-dna">ckeditor5-build-classic-dna</a>. However, it does not support Syntax Highlighting. The good thing is that it's fairly easy to add one via the front-end library.<blockquote>Although live code block highlighting&nbsp;is impossible when editing&nbsp;in CKEditor 5 (<a target="_blank" rel="noopener noreferrer" href="https://github.com/ckeditor/ckeditor5/issues/436#issuecomment-548399675">learn more</a>), the content can be highlighted when displayed in the frontend (e.g. in blog posts, messages, etc.).</blockquote>Here we will show you how to do this in React Component with prismjs.<figure class="image"><img src="https://user-images.githubusercontent.com/66892370/88102667-f164a480-cb6d-11ea-8d5e-b56e8294c1ce.png"></figure><h3>Step 1</h3>Install prismjs NPM.<pre><code class="language-plaintext">npm install -i prismjs</code></pre><h3>Step 2</h3>Import CSS, for NextJS, we can import it in _app.js, like<pre><code class="language-javascript">import "prismjs/themes/prism.css";</code></pre><h3>Step 3</h3>The CKEditor's Code Block plugin generates the standard code format, which works with prismjs without any change, the code snippet is like this:<pre><code class="language-html">&lt;pre&gt;
	&lt;code class="language-javascript"&gt;
		window.alert( 'Hello world!' )
	&lt;/code&gt;
&lt;/pre&gt;</code></pre>And we just need to call the prismjs' function highlightAll after the component is mounted: either in ComponentDidMount React Lifecycle or use useEffect, like below:<pre><code class="language-javascript">// github.com/deniapps/nextfeathers/blob/master/next/pages/blog/%5Bslug%5D.js
const Post = (props) =&gt; {
 //skip some code here ...
 useEffect(() =&gt; {
 Prism.highlightAll();
 }, [content]);

 return (
 &lt;Layout seoData={seoData}&gt;
 &lt;Container text&gt;
 &lt;Header as="h1"&gt;
 {title}
 &lt;Header.Subheader&gt;
 {author} | &lt;TimeAgo date={publishedOn} /&gt;
 &lt;/Header.Subheader&gt;
 &lt;/Header&gt;

 &lt;div dangerouslySetInnerHTML={{ __html: content }} /&gt;
 &lt;/Container&gt;
 &lt;/Layout&gt;
 );
};</code></pre><h3>Step 4</h3>No more, that's it!&nbsp;<h3>Final Note:</h3>In case, you don't like the default theme (prism.css), you can import different theme at step 2, here is the list of options:<a target="_blank" rel="noopener noreferrer" href="https://github.com/PrismJS/prism-themes/tree/master/themes">https://github.com/PrismJS/prism-themes/tree/master/themes</a>

CKEditor 5 does not ship with Code Blocks by default, but it could be added via custom build. The simplest way to use it is from ckeditor5-build-classic-dna. However, it does not support Syntax Highlighting. The good thing is that it's fairly easy to add one via the front-end library, like prismjs.

Syntax Highlighting with CKEditor's Code Block

Before nextJS 9.4, we can use next.config.js to set up environment variables, i.e., process.env.* which we can use in our application.&nbsp;<figure class="image"><img src="https://images.unsplash.com/photo-1483825366482-1265f6ea9bc9?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=1080&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjExODA5M30"><figcaption>Photo by: <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/@veeterzy?utm_source=unsplash-chrome-extension&amp;utm_medium=referral">veeterzy</a></figcaption></figure><h3>With next.config.js</h3>Example of next.config.js like this:<pre><code class="language-javascript">module.exports = {
	// other stuffs
	env: {
		API_HOST:
		process.env.NODE_ENV !== "production"
		? "http://localhost:3030"
		: "http://localhost:5050",
		UER_LC_KEY: "DENIUSER-" + process.env.NODE_ENV,
		SITE_NAME: "DENIAPPS",
	},
};</code></pre>Then, those environment variables are available in Node.js environment and browser. For example: we can use process.env.API_HOST when we fetch the data in Node.js environment, like<pre><code class="language-javascript">export const getStaticProps = async () =&gt; {
 &nbsp;const res = await fetch(process.env.API_HOST/posts')
 &nbsp;const posts: Post[] = await res.json()

 &nbsp;return {
 &nbsp;props: {
 &nbsp;posts,
 &nbsp;},
 &nbsp;}
}</code></pre>Or use process.env.SITE_NAME in a component, like<pre><code class="language-javascript">&lt;Menu.Item header key="menu-0"&gt;
 &lt;Link href="/"&gt;
 &lt;a&gt;
 &nbsp;&lt;Icon name="world" /&gt; {process.env.SITE_NAME}&nbsp;
 &lt;/a&gt;
 &lt;/Link&gt;
&lt;/Menu.Item&gt;;</code></pre>This works fine but has some issues:&nbsp;<ol><li>We have to commit next.config.js to the repository, so if there are some secret environment variables, then it could be accidentally exposed.</li><li>Since there is only one copy of next.config.js, if we deploy the App to a different environment, we may modify this file to have the correct variables setup, which will cause the conflict in the future. Although, we could try to avoid it by checking 'process.env.NODE_ENV', the whole setup would be messy.</li></ol><h3>With .env*</h3>Maybe because this, in Next.js versions 9.4 and up, it comes with built-in support for <a href="&nbsp;https://nextjs.org/docs/basic-features/environment-variables">.env*</a> file.We can now do a lot of things:<ol><li>use .env.*.local to save secret variables, like DB connections, etc. We have '*' in the file name, which means it includes, .env.local, .env.production.local, .env.development.local, and .env.test.local, They are all added to '.gitignore' by default.</li><li>we can have .env (all environments), .env.development (development environment), and .env.production (production environment).</li><li>By default all environment variables loaded through .env (.env.*.local, or .env.*) are only available in the Node.js environment, meaning they won't be exposed to the browser.</li><li>In order to expose a variable to the browser we have to prefix the variable with NEXT_PUBLIC_. For example:</li></ol><pre><code class="language-javascript">NEXT_PUBLIC_SITE_NAME="DENIAPPS"</code></pre><h3>Import Notes</h3><ul><li>When we say “use .env.*.local to save secret variables”, it only means those variable defined in the .local are not shown up in the public repository. If we defined ‘NEXT_PUBLIC_.’ variables in .env.*.local, then they are still visible in the browser.</li><li>.env.local is intended to override the default set, but if we have .env.development.local, then it will override the .env.local, for example: when we run 'npm run dev', it loads,</li></ul><pre><code class="language-plaintext">ready - started server on http://localhost:3000
info - Loaded env from /Projects/next-feathers/next/.env.development.local
info - Loaded env from /Projects/next-feathers/next/.env.local
info - Loaded env from /Projects/next-feathers/next/.env.development
info - Loaded env from /Projects/next-feathers/next/.env
event - compiled successfully</code></pre>Whatever loading first will be used, so the variable defined in .env.development.local overrides the same variable defined in .env.local, which overrides .env.development, which overrides .env.<ul><li>We cannot set PORT in .env file, and we have to pass it via start scripts, like</li></ul><pre><code class="language-plaintext">"start": "next start -p 8080"</code></pre>or<pre><code class="language-plaintext">npm run start -- --port 8082</code></pre><ul><li>Also Next.js document says,</li></ul><blockquote>There is a small difference between test environment, and both development and production that you need to bear in mind: .env.local won't be loaded, as you expect tests to produce the same results for everyone. This way every test execution will use same env defaults across different executions by ignoring your .env.local (which is intended to override the default set).</blockquote><h3>My Opinions</h3>Most of environment variables we defined are probably for client side to use, so by using this new feature, all those variables have to be prefixed with NEXT_PUBLIC_., which is a bit ignoring. I would suggest to do the opposite, which is using NEXT_PRIVATE_. prefix for variables ONLY available to Node.js environment.

Before nextJS 9.4, we could use next.config.js to set up environment variables, i.e., process.env.* which we can use in our application. In nextJS version 9.4 and up, we could use .env* files. At first glance, they make this complicated, but they have been given a purpose. In the article, we will go over this, and see how we benefit from this new feature.

Set Environment Variables in Next.JS

<figure class="image"><img src="https://images.unsplash.com/photo-1560961157-bde07f91b0b5?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=1080&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjExODA5M30"><figcaption>Photo By: <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/@ph_an_tom?utm_source=unsplash-chrome-extension&amp;utm_medium=referral">Duangphorn Wiriya</a></figcaption></figure>There are two types of “Controlled vs Uncontrolled” in React, and they are kind of “contradict” to each other.&nbsp;Here is what it says in <a target="_blank" rel="noopener noreferrer" href="https://reactjs.org/docs/forms.html">Forms Docs</a>:<blockquote>In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself.</blockquote>Use examples:<h3>Controlled Component</h3><pre><code class="language-javascript">class ControlledForm extends React.Component {
 state = {value: ''}; // controlled by React state
 
 handleChange = (event) =&gt; {
 this.setState({value: event.target.value});
 }
 
 handleSubmit = (event) =&gt; {
 alert('A name was submitted: ' + this.state.value);
 event.preventDefault();
 }

 render() {
 return (
 &lt;form onSubmit={this.handleSubmit}&gt;
 &lt;label&gt;
 Name:
 &lt;input type="text" 
 	value={this.state.value} 
 	onChange={this.handleChange} 
 /&gt;
 &lt;/label&gt;
 &lt;input type="submit" value="Submit" /&gt;
 &lt;/form&gt;
 );
 }
}</code></pre>As we see in the above example, the input value is controlled by ‘state’, when input changes, it sets state, then component re-renders with the new value set.<h3>Uncontrolled Component</h3><pre><code class="language-javascript">class UncontrolledForm extends React.Component {
 constructor(props) {
 super(props);
 this.input = React.createRef();
 }

 handleSubmit = (event) =&gt; {
 alert('A name was submitted: ' + this.input.current.value);
 event.preventDefault();
 };

 render() {
 return (
 &lt;form onSubmit={this.handleSubmit}&gt;
 &lt;label&gt;
 Name:
 &lt;input type="text" ref={this.input} /&gt;
 &lt;/label&gt;
 &lt;input type="submit" value="Submit" /&gt;
 &lt;/form&gt;
 );
 }
}</code></pre>As we see from the above example, there is no state for the input value, instead, it uses Ref to reference the input element. And the DOM handles the input change, and when the form is submitted, it uses the ref, this.input to get the input value.Pretty straightforward, right? we have no issue here.&nbsp;But when we read another doc about <a target="_blank" rel="noopener noreferrer" href="https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html">Derived State</a>:<blockquote>The terms <a target="_blank" rel="noopener noreferrer" href="https://reactjs.org/docs/forms.html#controlled-components">“controlled”</a> and <a target="_blank" rel="noopener noreferrer" href="https://reactjs.org/docs/uncontrolled-components.html">“uncontrolled”</a> usually refer to form inputs, but they can also describe where any component’s data lives. Data passed in as props can be thought of as controlled (because the parent component controls that data). Data that exists only in internal state can be thought of as uncontrolled (because the parent can’t directly change it).</blockquote>Use examples:<h3>Controlled Component</h3><pre><code class="language-javascript">function EmailInput(props) {
 return &lt;input onChange={props.onChange} value={props.email} /&gt;;
}</code></pre>Okay, we call the above component is controlled component because its value is from the parent component, and is changed by its parent's function ‘props.onChange’. &nbsp;- Fully controlled component!<h3>Uncontrolled Component</h3><pre><code class="language-javascript">class EmailInput extends Component {
 state = { email: this.props.email };

 render() {
 return &lt;input onChange={this.handleChange} value={this.state.email} /&gt;;
 }

 handleChange = event =&gt; {
 this.setState({ email: event.target.value });
 };
}</code></pre>This could be a confusing part, we call this uncontrolled component because it's not controlled by it's parent. It does handle the input value in the component except for the initial value, which is assigned from its parent. &nbsp;Did we just learned in the first example, that the Controlled Component means the value is controlled by “state” instead of the DOM. Yes, but it's a different context, so please don't be confused.&nbsp;<h3>Controlled &amp; Uncontrolled Warnings&nbsp;</h3>Below is one &nbsp;of the common warnings we may see in the browser Console when debugging the React App:<blockquote>Warning: A component is changing a controlled input of type checkbox to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.</blockquote>This refers to the first case, i.e., &nbsp;the state controlled vs the DOM controlled. For example, if we initialize the input value to be null, then try to set it via state, the debugger will complain about the error.<pre><code class="language-javascript">class ControlledForm extends React.Component {
 state = {value: null}; // set it to null, will make the input uncontrolled
 
 handleChange = (event) =&gt; {
 //WARNING: try to switch from uncontrolled to controlled
 this.setState({value: event.target.value}); 
 }

 render() {
 return (
 &lt;form&gt;
 &lt;label&gt;
 Name:
 &lt;input type="text" 
 	value={this.state.value} 
 	onChange={this.handleChange} 
 /&gt;
 &lt;/label&gt;
 &lt;/form&gt;
 );
 }
}</code></pre>But sometimes the debugger has a bug, like the below example:<pre><code class="language-javascript">const { classes, block, state, handleToggle } = this.props;

return( 
&lt;FormControlLabel
	control={
	&lt;Checkbox
		tabIndex={-1}
		onClick={handleToggle}
		name={block.title === "Border" ? "isBorder" : "isTextWrap"}
		checked={
			block.title === "Border"
			? state.isBorder
			: state.isTextWrap
		}
	/&gt;
	}
	classes={{
		label: classes.label,
	}}
/&gt;);</code></pre>Although “state” is from props, the debugger thinks it's controlled by the local state for whatever reason. The warnings are gone after modifying the checked logic as<pre><code class="language-javascript">checked={
 block.title === "Border"
 ? (state.isBorder
 ? true
 : false)
 : (state.isTextWrap
 ? true
 : false)
}</code></pre>&nbsp;

There are two types of “Controlled vs Uncontrolled” in React, and they are kind of “contradict” to each other. To better understand them, we would need to understand the context. 

Controlled vs Uncontrolled - Confusing Part

I barely used refs in my about 5 years with ReactJS. I knew that it has been used to do some native Javascript actions, like ‘focus’, ‘scrolling’, ‘text selection’, etc. It's a bit like jQuery way to manipulate the DOM. Isn't it?&nbsp;<figure class="image"><img src="https://images.unsplash.com/photo-1452915858640-325b467fe554?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=1080&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjExODA5M30"><figcaption>Photo By: <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/@shivelycreative?utm_source=unsplash-chrome-extension&amp;utm_medium=referral">Nathan Shively</a></figcaption></figure>But one day, I saw the error shown on my console of my React App, like this:<blockquote>Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?</blockquote>Then I started learning it. Before we get into this issue, let's learn some basic concepts first. Note that in this article, we use new React API, like <code>createRef(),</code> <code>useRef()</code>, <code>forwardRef()</code>, etc. so if you are still using old API, i.e. string refs, then you may upgrade it, because,<blockquote>We advise against it because string refs have <a target="_blank" rel="noopener noreferrer" href="https://github.com/facebook/react/pull/8333#issuecomment-271648615">some issues</a>, are considered legacy, and are likely to be removed in one of the future releases.</blockquote>See All Examples used in this article at Codepen: <a target="_blank" rel="noopener noreferrer" href="https://codepen.io/collection/AOaQkG">https://codepen.io/collection/AOaQkG</a><h3>Example 1 - Ref Focus in Class Component</h3><pre><code class="language-javascript">class Ref extends React.Component {
 constructor(props) {
 super(props);
 this.firstNameRef = React.createRef();
 this.lastNameRef = React.createRef();
 }

 componentDidMount() {
 this.firstNameRef.current.focus();
 }

 handleKeyDown = (e) =&gt; {
 if (e.key === "Enter") {
 this.lastNameRef.current.focus();
 }
 };

 render() {
 return (
 &lt;Layout&gt;
 &lt;Form&gt;
 &lt;Form.Field&gt;
 &lt;label&gt;First Name&lt;/label&gt;
 &lt;input
 placeholder="First Name"
 ref={this.firstNameRef}
 onKeyDown={this.handleKeyDown}
 /&gt;
 &lt;/Form.Field&gt;
 &lt;Form.Field&gt;
 &lt;label&gt;Last Name&lt;/label&gt;
 &lt;input placeholder="Last Name" ref={this.lastNameRef} /&gt;
 &lt;/Form.Field&gt;
 &lt;/Form&gt;
 &lt;/Layout&gt;
 );
 }
}</code></pre>We create Refs in Constructor and assign it to the input fields, then we can access the DOM element by using, for example, this.firstNameRef.current, then focus it.&nbsp;Demo1: <a target="_blank" rel="noopener noreferrer" href="https://deniapps.com/playground/ref/class-ref-focus">https://deniapps.com/playground/ref/class-ref-focus</a><h3>Example 2 - Ref Focus in Functional Component</h3><pre><code class="language-javascript">const UseRef = () =&gt; {
 const firstNameRef = useRef();
 const lastNameRef = useRef();

 useEffect(() =&gt; {
 firstNameRef.current.focus();
 // document.getElementById("dnx-input").focus();
 }, []);

 const handleKeyDown = (e) =&gt; {
 if (e.key === "Enter") {
 lastNameRef.current.focus();
 }
 };

 return (
 &lt;Layout&gt;
 &lt;Form&gt;
 &lt;Form.Field&gt;
 &lt;label&gt;First Name&lt;/label&gt;
 &lt;input
 placeholder="First Name"
 ref={firstNameRef}
 onKeyDown={handleKeyDown}
 /&gt;
 &lt;/Form.Field&gt;
 &lt;Form.Field&gt;
 &lt;label&gt;Last Name&lt;/label&gt;
 &lt;input placeholder="Last Name" ref={lastNameRef} /&gt;
 &lt;/Form.Field&gt;
 &lt;/Form&gt;
 &lt;/Layout&gt;
 );</code></pre>Since it's a functional component, we use <code>useRef()</code> instead of <code>createRef()</code>, other than that, both components are pretty much identical.Demo2: <a target="_blank" rel="noopener noreferrer" href="https://deniapps.com/playground/ref/functional-ref-focus">https://deniapps.com/playground/ref/functional-ref-focus</a><h3>Example 3 - Use Ref to Change Value - (DON'T DO THIS)</h3><pre><code class="language-javascript">class Ref extends React.Component {
 constructor(props) {
 super(props);
 this.yourRef = React.createRef();
 }

 componentDidMount() {
 this.yourRef.current.focus();
 }

 incremenetInput = () =&gt; {
 this.yourRef.current.value++;
 };

 render() {
 return (
 &lt;Layout&gt;
 &lt;Form&gt;
 &lt;Form.Field&gt;
 &lt;label&gt;Just a number&lt;/label&gt;
 &lt;input
 placeholder="Enter Value"
 ref={this.yourRef}
 onKeyDown={this.handleKeyDown}
 /&gt;
 &lt;/Form.Field&gt;
 &lt;Button onClick={this.incremenetInput}&gt;Increase Value&lt;/Button&gt;
 &lt;/Form&gt;
 &lt;/Layout&gt;
 );
 }
}</code></pre>So, yes, we could change the value of the DOM element using Ref - back to the age of jQuery! But, we should avoid using refs for anything that can be done declaratively.Demo3: <a target="_blank" rel="noopener noreferrer" href="https://deniapps.com/playground/ref/class-ref-change-value">https://deniapps.com/playground/ref/class-ref-change-value</a><h3>Example 4 - Forward Ref Using React.forwardRef</h3><pre><code class="language-javascript">//Child Component
const ChildInput = React.forwardRef((props, ref) =&gt; {
 return &lt;input {...props} ref={ref} /&gt;;
});

//Parent Component
const FunctionalForwardRef = () =&gt; {
 const childRef = useRef();

 const handleClick = () =&gt; {
 childRef.current.focus();
 };

 return (
 &lt;Layout&gt;
 &lt;Header as="h3"&gt;Ref Forward Demo&lt;/Header&gt;
 &lt;ChildInput type="text" ref={childRef} /&gt;
 &lt;Button onClick={handleClick}&gt;Focus Child Input&lt;/Button&gt;
 &lt;/Layout&gt;
 );
};</code></pre>Forwarding Ref means forward the ref from the parent component to the child component, so we can control the DOM element in the child component from the parent component. &nbsp;But the ‘ref’ is a reserved word in React JSX, &nbsp;we cannot use it as a prop, which means we cannot pass thru <code>ref</code> using <code>props.ref</code>, so we should call <code>React.forwardRef</code> to pass thru ref. - Again, props, key, ref are three reserved words.&nbsp;Demo4: <a target="_blank" rel="noopener noreferrer" href="https://deniapps.com/playground/ref/forward-ref">https://deniapps.com/playground/ref/forward-ref</a><h3>Example 5 - Forward Ref Using Custom Prop</h3><pre><code class="language-javascript">//Child Component
const ChildInput = (props) =&gt; {
 return &lt;input ref={props.forwardedRef} /&gt;;
});

//Parent Component
const FunctionalForwardRef = () =&gt; {
 const childRef = useRef();

 const handleClick = () =&gt; {
 childRef.current.focus();
 };

 return (
 &lt;Layout&gt;
 &lt;Header as="h3"&gt;Ref Forward Demo&lt;/Header&gt;
 &lt;ChildInput type="text" forwardedRef={childRef} /&gt;
 &lt;Button onClick={handleClick}&gt;Focus Child Input&lt;/Button&gt;
 &lt;/Layout&gt;
 );
};</code></pre>Actually, we could use Custom Prop to save Ref like other props,<code> forwardedRef={childRef}</code>, Noted that forwardedRef is a custom name, and you can name it everything meaningful as long as it's not a reserved word.&nbsp;Cool, this is much simpler, why bother to use <code>React.forwardRef()</code>? One benefit is that by using <code>React.forwardRef()</code>, we separate the props and ref, then we could pass the props, using<code> {…props}</code>.Demo5: <a target="_blank" rel="noopener noreferrer" href="https://deniapps.com/playground/ref/functional-forward-ref">https://deniapps.com/playground/ref/functional-forward-ref</a><h3>Forward Ref Warning</h3>Now let's back the issue we see in the browser console as mentioned at the beginning of the article. See the example below:<pre><code class="language-plaintext">//Child Component - without passing thru the ref causes the warning
const ChildInput = (props) =&gt; {
 return &lt;input {...props} /&gt;;
});

//Parent Component
const FunctionalForwardRef = () =&gt; {
 const childRef = useRef();

 const handleClick = () =&gt; {
 childRef.current.focus();
 };

 return (
 &lt;Layout&gt;
 &lt;Header as="h3"&gt;Ref Forward Demo&lt;/Header&gt;
 &lt;ChildInput type="text" ref={childRef} /&gt;
 &lt;Button onClick={handleClick}&gt;Focus Child Input&lt;/Button&gt;
 &lt;/Layout&gt;
 );
};</code></pre>Since we did not pass thru the ref in this example, the React throws the warnings:<blockquote>Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?</blockquote><h3>Last Thing</h3>As we learned in Example 3, we could use Ref to change the DOM element's value, although we don't recommend to do this, if we really really want to do it, then we should be aware that we cannot use Ref to change the value of &nbsp;the controlled component, for example, if we use semantic-ui-react to render input, like this:<pre><code class="language-javascript">import { Input, Button } from "semantic-ui-react";
incremenetInput = () =&gt; {
 this.yourRef.current.value++;
};
....
&lt;Input type="text" ref={this.yourRef} defaultValue="0" /&gt;
&lt;Button onClick={this.incremenetInput}&gt;Increment Input Value&lt;/Button&gt;</code></pre>We would not be able to update the value of &lt;Input&gt;. That's because the Input is an object, like this:<pre><code class="language-plaintext">Input {props: {…}, context: {…}, refs: {…}, updater: {…}, inputRef: {…}, …}
computeIcon: ƒ ()
computeTabIndex: ƒ ()
context: {}
focus: ƒ ()
handleChange: ƒ (e)
handleChildOverrides: ƒ (child, defaultProps)
inputRef: {current: input}
partitionProps: ƒ ()
props: {type: "text", defaultValue: "0"}
refs: {}
select: ƒ ()
state: null
updater: {isMounted: ƒ, enqueueSetState: ƒ, enqueueReplaceState: ƒ, enqueueForceUpdate: ƒ}
value: "10"</code></pre>It's a controlled component, the value of the input is in <code>props</code> not in <code>ref.current</code>.See All Examples used in this article at Codepen: <a target="_blank" rel="noopener noreferrer" href="https://codepen.io/collection/AOaQkG">https://codepen.io/collection/AOaQkG</a>That's it - happy Refing :-)<h3>Bonus Example (3/26/2021)</h3>I saw a question at <a target="_blank" rel="noopener noreferrer" href="https://stackoverflow.com/questions/66825751">S0</a> asking how to pass ‘Ref’ to {Children}. This is pretty tricky, because {Children} is a Prop, to pass Ref, we basically need to pass Prop to {Children}. &nbsp;After some research, I figured out the solution by using React's Context.<pre><code class="language-javascript" id="ik-qZzw5C">const MyContext = React.createContext();

function Widget(props) {
 const myRef = useRef(null);
 useEffect(() =&gt; {
 myRef.current.focus();
 });
 return (
 &lt;MyContext.Provider value={myRef}&gt;{props.children}&lt;/MyContext.Provider&gt;
 );
}

function Example() {
 return (
 &lt;Widget&gt;
 &lt;MyContext.Consumer&gt;
 {(forwardedRef) =&gt; &lt;input type="text" ref={forwardedRef} /&gt;}
 &lt;/MyContext.Consumer&gt;
 &lt;/Widget&gt;
 );
}</code></pre>Check out the demo at <a target="_blank" rel="noopener noreferrer" href="https://codesandbox.io/s/prod-voice-mkrcp">CodeSandbox</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

You may find out React Refs is confusing like I did. In this article, we use real examples to explain what Ref is, how to use it to do focus, and how to do forwarding Ref, etc. We will cover the Ref usages in both Class component and Functional Component.

Clarify React Refs by Examples

Our Apollo Server is running on AWS Lambda using Serverless Framework, and then it's accessed thru AWS API Gateway using Cognito User Pool as an authorizer.&nbsp;<blockquote>More information about Amazon Cognito User Pools can be found in <a target="_blank" rel="noopener noreferrer" href="https://deniapps.com/blog/how-tokens-work-in-amazon-cognito-user-pools">this article</a>.</blockquote><figure class="image"><img src="https://images.unsplash.com/photo-1600695268275-1a6468700bd5?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MXwxNTQwMTB8MHwxfHJhbmRvbXx8fHx8fHx8&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=1080"><figcaption>Photo by <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/@markusspiske?utm_source=DNX&amp;utm_medium=referral">Markus Spiske</a> on <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/?utm_source=DNX&amp;utm_medium=referral">Unsplash</a></figcaption></figure>Our frontend (CMS) is running on top of Create React App with Apollo Client.On the localhost, we use serverless offline, so there is not API Gateway, Cognito User Pool, and Lambda in between the Apollo Client and Apollo Server.We received a lot of complaints from the CMS users that they got the “Failed to Fetch” error a few times almost every day when they were working on the website. &nbsp;When that happened, the CMS cannot communicate to the API server. With console log enable, we saw the information like below:<blockquote>[Network error]: TypeError: Failed to fetch &nbsp;&nbsp;Access to fetch at ‘https://API-URI/graphql’ from origin ‘https://CMS-URL’ has been blocked by CORS policy: "No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request's mode to ‘no-cors’ to fetch the resource with CORS disabled.&nbsp;&nbsp;&nbsp;Failed to load resource: https://API-URL/graphql:1 net:ERR_FAILED&nbsp;</blockquote>The hard part to solve this issue is that:<ol><li>There wasn't useful information that could be found in the AWS Cloudwatch</li><li>We could not reproduce it on the local, or on production (with brief test)</li></ol>After spending a lot of time checking the network connection (the CMS can only access via VPN), API Gateway, Lamba, RDS proxy, MySQL database, etc., everything that is different between Localhost and Production, we still could not find the clues.&nbsp;<blockquote>We were pretty sure that the CORS is enabled on Apollo Server. &nbsp;Somehow the server's response does not send the No "Access-Control-Allow-Origin’ header, and the client does not set the request's mode to ‘no-cors’, &nbsp;so the browser throws this error.</blockquote><blockquote>More informatio about CORS error could be found in <a target="_blank" rel="noopener noreferrer" href="https://deniapps.com/blog/false-alarm-of-cors-error">this article</a></blockquote>So, how about eliminating the CORS log first? We need to see the real error log.&nbsp;<blockquote>All debugging starts from the log - Adam C.&nbsp;</blockquote>We took a second look at the API Gateway and found that we should manually add the “Access-Control-Allow-Origin” header to 4xx and 5xx response, otherwise, this header will be missing from the response, and then the real 4xx and 5xx error will be hidden, because the browser will complain CORS errors as shown above.After adding this header with the value “*”, we got the new error report from our CMS users. As expected, we saw the real error message:<blockquote>Failed to load resource: the server responded with a status of 401 ()&nbsp;&nbsp;[Network error]: ServerError: Response not successful: Reveived status code 401</blockquote>After finding the root of failure, the fixing became much more targetable. We quickly figured out that it's related to the Cognito user pool, which we use as an authorizer. The AccessToken and IDToken are set with a short expiration time of one hour, so if the user is on the website for more than one hour, &nbsp;he/she will use pass an expired token for API call, therefore, the 401 unauthorized error will be received. Also, after refreshing the page, everything is back to normal, that's because the lifetime of refreshToken is one day, and Amplify will auto-refresh the AccessToken and IDToken as long as the refreshToken is not expired.&nbsp;So the solution is clear that we just need to refresh the AccessToken/IDToken when they are expired, but we need to do this in the background without refreshing the page, otherwise, the user's unsaved work will get lost. &nbsp;We use Amplify React UI Component to handle user login. When the login is successful or the user is already logged in, the ID token is passed to Apollo authLink as below:<pre><code class="language-javascript" id="80kA0Le8f">Auth.currentAuthenticatedUser().then(async (user) =&gt; {
 const token = user.signInUserSession.idToken.jwtToken;
 const authLink = new ApolloLink((operation, forward) =&gt; {
 // Use the setContext method to set the HTTP headers.
 operation.setContext({
 headers: {
 authorization: token ? `Bearer ${token}` : ""
 }
 });

 // Call the next link in the middleware chain.
 return forward(operation);
 });
});</code></pre>The logic above is implemented in the App.js, which is the parent component of all, and it's only run once at the componentDidMount lifecycle, so without refreshing the page, the token is never changed. But as we learned above, when the token is expired, the 401 unauthorized error is received. The Apollo Client allows us to check for a certain failure condition or error code, and retry the request if rectifying the error is possible. Below is what we came up using the ErrorLink: (If you are not familiar with Apollo Link, check it out <a target="_blank" rel="noopener noreferrer" href="https://www.apollographql.com/docs/react/api/link/introduction/">here</a>)<pre><code class="language-javascript" id="hAPivEyJR">const handlErrorLink = onError(
 ({ graphQLErrors, networkError, operation, forward }) =&gt; {
 if (graphQLErrors)
 graphQLErrors.forEach(({ message, locations, path }) =&gt;
 console.log(
 `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
 )
 );
 if (networkError) {
 if (String(networkError).match(/Received status code 401/i)) {
 return fromPromise(
 Auth.currentAuthenticatedUser()
 .then(async (user) =&gt; {
 return user.signInUserSession.idToken.jwtToken;
 })
 .catch((error) =&gt; {
 console.log("refresh token failed: ", error);
 // Handle token refresh errors e.g clear stored tokens, redirect to login, ...
 return;
 })
 )
 .filter((value) =&gt; {
 return Boolean(value);
 })
 .flatMap((token) =&gt; {
 const oldHeaders = operation.getContext().headers;
 // modify the operation context with a new token
 operation.setContext({
 headers: {
 ...oldHeaders,
 authorization: `Bearer ${token}`,
 },
 });
 return forward(operation);
 });
 }

 console.log(`[Network error]: ${networkError}`);
 }
 }
);</code></pre>Note the in our case, the 401 unauthorized is captured in networkError, and the error string contains “<code>Received status code 401”</code> which we used to filter, and <code>Auth.currentAuthenticatedUse,</code> the function provided by ‘Amplify’ is asynchronous, so we have to use <code>fromPromise,</code> the function provided by ‘apollo-link’ to token from a Promise object, and then replace the old header in operation context, finally forward the operation to retry.After this, we had the annoying ‘failed to fetch’ error fixed. :-)&nbsp;

In this article, we learned how to fix the 'failed to fetch' error from API-Gateway in our AWS Lambda Serverless Framework. The root cause is ended up to be the expired AWS Cognito Access/ID tokens. We were able to fix this by utilizing the Apollo Error Link to replace the old token with the refreshed one, and then retry the request.

Finally We Fixed "Failed to Fetch" Error

The blog system of DeniApps has a field named Tags. When writing a new post, I can either create a new one or choose the existing one. As more tags were added into the system, one day, I found that I could not find the tag 'React' which I am pretty sure is in the system. I looked into this issue and realized that the Tags dropdown options are populated when the page is rendered. Due to the default pagination size of FeathersJS, only 10 records are fetched. Since I have way more than 10 tags in the system, not all tags are available.&nbsp;<figure class="image"><img src="https://images.unsplash.com/photo-1608556984766-105e2dc59706?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MnwxNTQwMTB8MHwxfHNlYXJjaHw5fHxzZWxlY3Rpb258ZW58MHx8fHwxNjM0NTE4MzE4&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=1080"><figcaption>Photo by <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/@claybanks?utm_source=DNX&amp;utm_medium=referral">Clay Banks</a> on <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/?utm_source=DNX&amp;utm_medium=referral">Unsplash</a></figcaption></figure>One simple solution is increasing the page size, but I would like to do something better. Semantic UI Dropdown supports a prop named <code>onSearchChange</code>, where we can create a handler to call the backend API to get the real-time options based on the search query.&nbsp;<h3>Semantic UI Dropdown</h3>Here is the fronted change I made in the Dropdown Component:<pre><code class="language-javascript" id="ZlZ_sZVtM">&lt;Dropdown
 placeholder={props.placeholder || "Please choose"}
 name={props.name}
 selection
 search
 options={props.options}
 multiple
 value={props.value ? props.value : []}
 allowAdditions
 onChange={handleDropdownChange}
 onSearchChange={handleSearchChange}
 onAddItem={handleAddition}
/&gt;;

const handleSearchChange = (event, search) =&gt; {
 if (props.handleSearchChange) {
 props.handleSearchChange(search.searchQuery);
 }
};</code></pre>As you see, the handleSearchChange will pass the searchQuery to the function in the parent component:<pre><code class="language-javascript" id="PnxHjXEum">handleSearchChange = (kw) =&gt; {
 this.debounceFun(kw);
};

debounceFun = _.debounce(async (kw) =&gt; {
 console.log(kw);
 const ret = await searchTags(kw);

 const matchedTags = ret.data;
 const tagsInputOptions = matchedTags.map((item) =&gt; ({
 value: item.slug,
 text: item.name,
 key: item._id
 }));
 const newAllOptions = {
 ...this.state.allOptions,
 tags: tagsInputOptions
 };

 this.setState({ allOptions: newAllOptions });
}, 500);</code></pre>Nothing special here, but I use lodash.debounce to prevent too many requests from killing the backend server.<blockquote>Creates a debounced function that delays invoking <code>func</code> until after <code>wait</code> milliseconds have elapsed since the last time the debounced function was invoked. The debounced function comes with a <code>cancel</code> method to cancel delayed <code>func</code> invocations and a <code>flush</code> method to immediately invoke them. Provide <code>options</code> to indicate whether <code>func</code> should be invoked on the leading and/or trailing edge of the <code>wait</code> timeout. The <code>func</code> is invoked with the last arguments provided to the debounced function. Subsequent calls to the debounced function return the result of the last <code>func</code> invocation.</blockquote>Learn more about <a target="_blank" rel="noopener noreferrer" href="https://lodash.com/docs/4.17.15#debounce">debounce</a>.The <code>searchTag</code> function is like below:<pre><code class="language-javascript" id="Qi-saLYwn">const searchTags = (kw) =&gt; {
 return agent({
 method: "get",
 url: "/tags/?$search=" + encodeURIComponent(kw),
 });
};</code></pre>Note agent is the wrapper of API calls, here is the <a target="_blank" rel="noopener noreferrer" href="https://github.com/deniapps/nextfeathers/blob/master/next/lib/agent.js">source code.</a> And the “<code>/tags/?$search</code>” is the API endpoint.<h3>FeathersJS Search API</h3>The DeniApps Blog system uses FeathersJS as a backend with MongoDB. To implement the search function, I use <a target="_blank" rel="noopener noreferrer" href="https://www.npmjs.com/package/feathers-mongodb-fuzzy-search">‘feather-mongodb-fuzzy-search’</a>, which supports both ‘full-text’ search and ‘filed pattern’ matching. For the tags search, I use the latter. - For example, when I type in ‘r’, I would expect any tags whose name starts with ‘r’, like ‘react’ returned. To implement this.<ul><li>add whitelist to enable some special params in src/servcies/tags/tags.service.js</li></ul><pre><code class="language-javascript" id="W2jMo556M">module.exports = function (app) {
 const options = {
 Model: createModel(app),
 paginate: app.get("paginate"),
 whitelist: ["$populate", "$text", "$search", "$regex"],
 };

 // Initialize our service with any options it requires
 app.use("/tags", new Tags(options, app));

 // Get our initialized service so that we can register hooks
 const service = app.service("tags");

 service.hooks(hooks);
};</code></pre><ul><li>add search hook in src/services/tags/tags.hook.js</li></ul><pre><code class="language-javascript" id="Lpgf7VQHZ">const search = require("feathers-mongodb-fuzzy-search");

module.exports = {
 before: {
 all: [],
 find: [search({ fields: ["name", "slug"] })],
 ...</code></pre><ul><li>mutate param.query in src/services/tags/tags.class.js</li></ul>I thought this should be handled by search hook, but I got this error because I mutated the param.query.<blockquote>error: MongoError: unknown top level operator: $regex. If you have a field name that starts with a '$' symbol, consider using $getField or $setField.</blockquote>And then, I found that the query after search hook is something like:<pre><code class="language-javascript" id="6lrRMbtGv"> query: { '$regex': /r/i },</code></pre>By look into MongoDB doc, the correct syntax should be:<pre><code class="language-javascript" id="f5Eo_zxIg">{ &lt;field&gt;: { $regex: /pattern/&lt;options&gt; } }</code></pre>So I have to update the query in tags.class.js as below:<pre><code class="language-javascript" id="Q9wy3YmU-">exports.Tags = class Tags extends Service {
 async find(params) {
 if (params.query.$regex) {
 params.query = {
 name: params.query,
 };
 }
 return super.find(params);
 }
};</code></pre>Note: <code>name</code> is the field of tags table, where I would like to search for.

In this article, I show you how I implemented the tags function using remote data. The frontend is done by the Semantic UI Dropdown component and the backend is implemented using FeathersJS with Mongodb. 

Semantic UI Dropdown with Remote Data

React's key point is 'state', and the 'key' attribute is special and powerful. When a <code>key</code> changes, React will create a new component instance rather than update the current one, so the <code>useSate</code> will be called in the component.<figure class="image"><img src="https://images.unsplash.com/photo-1536252470153-1fa6046d8723?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MnwxNTQwMTB8MHwxfHNlYXJjaHw1OXx8cmVmcmVzaHxlbnwwfHx8fDE2NjQ5MzYwMDE&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=1080"><figcaption>Photo by <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/@mattbotsford?utm_source=DNX&amp;utm_medium=referral">Matt Botsford</a> on <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/?utm_source=DNX&amp;utm_medium=referral">Unsplash</a></figcaption></figure>First highly recommend reading this post from ReactJS Blog: <a target="_blank" rel="noopener noreferrer" href="https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html">https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html</a> - it's old article and is not really related to the issue I have, but it explains what ‘key’ attribute is.Here is a Child Component I have:Rank.JS<pre><code class="language-javascript" id="FlcRtib_W">export default function TimeTable({ swimmer }) {
 const {season, records} = swimmer;
 let defaultSeason = season;

 try {
 if (records &amp;&amp; records.total &gt; 0) {
 const mySeason = getSeason(records.data[0].date);
 defaultSeason = mySeason.season;
 }
 } catch (error) {}

 const ageGroup = getAgeGroup(rankingAge);
 const zone = getZone(lscCode);

 const [activeSeason, setActiveSeason] = useState(defaultSeason);
 ...
}</code></pre>In the Parent Component I have:Swimmer.js<pre><code class="language-javascript" id="_y5fjbZSR">import RANK from "./Rank.js";
const Swimmer = (props) =&gt; {
	....
	return(
		&lt;Rank swimmer={props.swimmer} /&gt;
	)
}</code></pre>So when calling “/swimmer/abc”, it renders &lt;Swimmer&gt; component, which renders &lt;Rank&gt; component, &nbsp;where <code>activeSeason</code> is state via <code>useState</code>. &nbsp;Note that <code>activeSeason</code> is calculated based on the current swimmer (abc.) After that, I call another swimmer “/swimmer/efg”, since it's under the same Router vis Next/Link, so the react only does update the existing Child (i.e., &lt;Rank&gt; component), and something probably very basic, although it still calculates the <code>defaultSeason</code> for the new swimmer ‘efg’, the state will not be set, because it only happens in a new component (i.e., the first component mount.) Therefore the <code>activeSeason</code> from the previous swimmer (abc) will be used regarding the new default value.&nbsp;To fix this, just need to add ‘key’. &nbsp;Another solution could be adding useEffect with the swimmer as a dependency, so when the swimmer changes, set <code>state</code> by calling <code>setActiveSeason</code>. I certainly prefer to do this by adding a key:<pre><code class="language-javascript" id="_y5fjbZSR">import RANK from "./Rank.js";
const Swimmer = (props) =&gt; {
	....
	return(
		&lt;Rank swimmer={props.swimmer} key={props.swimmer.id} /&gt;
	)
}</code></pre>&nbsp;

React's key point is 'state', and 'key' attribute is special and powerful. When a key changes, React will create a new component instance rather than update the current one, so the useSate will be called in the component.

All Posts In Reactjs