In addition to creating asynchronous tasks, celery also allows you to create periodic tasks, which are executed from time to time. This can be quite useful to give maintenance to the database from time to time, to send marketing or shopping cart recovery emails, perhaps even to empty the contents of some temporary cache in the database or any repetitive task where execution time is an important factor, that is, to improve the performance of a django application.&#xA;<h2 id="installation-and-configuration-of-celery-in-django">Installation and configuration of Celery in Django</h2>&#xA;The first step is to install Celery:&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash">pip install &#34;celery==5.1.2&#34;&#xA;</code></pre></div>As with asynchronous tasks, we also need rabbitmq or another broker.&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash">sudo apt install rabbitmq-server&#xA;</code></pre></div>Next, at the same level as our configuration file, we will create a file called celery.py, where we will create a celery app and pass the django configuration to it.&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-python" data-lang="python"># celeryApp/celery.py&#xA;import os&#xA;from celery import Celery&#xA;&#xA;os.environ.setdefault(&#39;DJANGO_SETTINGS_MODULE&#39;, &#39;celeryApp.settings&#39;)&#xA;app = Celery(&#39;celeryApp&#39;)&#xA;app.config_from_object(&#39;django.conf:settings&#39;, namespace=&#39;CELERY&#39;)&#xA;app.autodiscover_tasks()&#xA;</code></pre></div>If you have doubts about what each line means or what rabbitmq is for, please visit my post about celery and django.&#xA;We also import celery into our init_.py_ file in our django project.&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-python" data-lang="python"># celeryApp/__init__.py&#xA;from .celery import app as celery_app&#xA;__all__ = (&#39;celery_app&#39;,)&#xA;</code></pre></div>Sounds pretty obvious, but still I remind you; your django application must be running for celery to work.&#xA;&#xA;<h2 id="periodic-sending-of-tasks-with-crontab">Periodic sending of tasks with crontab</h2>&#xA;For this example we are going to send emails periodically. To achieve this, we are going to add our periodic tasks in the file we just created&#xA;First we are going to define the function that we want to execute, in this case it will only send an email, using the django function and taking the data of its arguments.&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-python" data-lang="python"># celeryApp/celery.py&#xA;from django.core.mail import send_mail&#xA;# ...&#xA;&#xA;@app.task&#xA;def send_my_email(subject, message, fromEmail, recipients):&#xA; send_mail(&#xA; subject,&#xA; message,&#xA; fromEmail,&#xA; recipients,&#xA; fail_silently=False,&#xA; )&#xA;</code></pre></div>Now let&rsquo;s set up the celery configuration.&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-python" data-lang="python"># celeryApp/celery.py&#xA;from django.core.mail import send_mail&#xA;# ...&#xA;&#xA;@app.on_after_configure.connect&#xA;def setup_periodic_tasks(sender, **kwargs):&#xA; sender.add_periodic_task(10.0, send_my_email.s(&#39;subject&#39;, &#39;message&#39;, &#39;from@example.com&#39;, [&#39;to@example.com&#39;]), name=&#39;Envia email cada 10 segundos&#39;)&#xA;&#xA;@app.task&#xA;def send_my_email(subject, message, fromEmail, recipients):&#xA; send_mail(&#xA; subject,&#xA; message,&#xA; fromEmail,&#xA; recipients,&#xA; fail_silently=False,&#xA; )&#xA;</code></pre></div>The decorator @app.on_after_configure tells celery that these functions will be programmed once the configuration is complete.&#xA;Our function is going to receive a messenger (sender) as a parameter, we will call its add_periodic_task() method to tell it how often we want our task to be executed and then we will call the s() method of the function we define.&#xA;add_periodic_task() receives as first argument the interval in seconds that we want to elapse between each task and the second is our function executing the s() method with its arguments.&#xA;We define our function and decorate it with @app.task.&#xA;For our periodic scheduling to work, celery needs to be running beat.&#xA;<h2 id="beat-in-celery">beat in celery</h2>&#xA;What is Beat? Beat is one of your services that takes care of scheduled tasks. Beat is in charge of reading and sending the scheduled tasks to the celery workers that will execute them.&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-python" data-lang="python">celery -A celeryApp beat -l info&#xA;</code></pre></div><a hx-boost="false" href="https://coffeebytes.dev/en/django/periodic-tasks-with-celery-and-django/images/CeleryBeatRabbitMQEsquema.png">&#xA;<figure class="md-local-image"><img src="https://coffeebytes.dev/en/django/periodic-tasks-with-celery-and-django/images/CeleryBeatRabbitMQEsquema.png"&#xA; loading="lazy"&#xA; alt="Simplified diagram of celery beat operation">&#xA;</figure>&#xA;</a>&#xA;Celery Beat Schematic&#xA;Since beat needs to transmit its tasks to a worker, it will be necessary to create one.&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-python" data-lang="python">celery -A celeryApp worker -l info&#xA;</code></pre></div>Now celery will make sure that an email is sent every 10 seconds (pure spam, I know).&#xA;Once the celery services are running we will see how our function starts executing every 10 seconds.&#xA;<a hx-boost="false" href="https://coffeebytes.dev/en/django/periodic-tasks-with-celery-and-django/images/EjecucionDeTareasPeriodicasCeleryBeat.png">&#xA;<figure class="md-local-image"><img src="https://coffeebytes.dev/en/django/periodic-tasks-with-celery-and-django/images/EjecucionDeTareasPeriodicasCeleryBeat.png"&#xA; loading="lazy"&#xA; alt="Periodic tasks running on console">&#xA;</figure>&#xA;</a>&#xA;Celery tasks within 10 seconds of each other&#xA;<h2 id="tasks-scheduled-with-crontab">Tasks scheduled with crontab</h2>&#xA;What if instead of specifying an interval to execute the tasks we want them to be executed on a specific date, for example: every Sunday at 1:30 am.&#xA;Instead of calculating the seconds we can create a more friendly format with the crontab utility provided by celery.&#xA;Yes, you are correct, crontab shares the format with the &#xA;&#xA;<a class="markdown-link" href="https://coffeebytes.dev/en/linux/program-periodic-tasks-easily-in-linux-with-cron-and-crontab/">crontab file used by the GNU/Linux cron daemon</a>&#xA;, which I already talked about in a post.&#xA;Crontab will ensure that the execution format is every Monday at 7:30 a.m.&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-python" data-lang="python"># celeryApp/celery.py&#xA;from celery.schedules import crontab&#xA;&#xA;# ...&#xA;&#xA;@app.on_after_configure.connect&#xA;def setup_periodic_tasks(sender, **kwargs):&#xA; # ...&#xA; sender.add_periodic_task(&#xA; crontab(hour=7, minute=30, day_of_week=1),&#xA; send_my_email.s(&#39;subject&#39;, &#39;message&#39;, &#39;from@example.com&#39;, [&#39;to@example.com&#39;]),&#xA; )&#xA;# ...&#xA;</code></pre></div>You can see more details directly in the &#xA;&#xA;<a class="markdown-link" href="https://docs.celeryproject.org/en/stable/userguide/periodic-tasks.html" rel="noopener" target="_blank">Celery documentation</a>&#xA;&#xA;

In addition to creating asynchronous tasks, celery also allows you to create periodic tasks, which are executed from time to time. This can be quite useful to give maintenance to the database from time to time, to send marketing or shopping cart recovery emails, perhaps even to empty the contents of some temporary cache in the database or any repetitive task where execution time is an important factor, that is, to improve the performance of a django application.

Periodic Tasks with Celery and Django

Celery, in combination with Django serve to solve a problem: the lack of asynchrony in our application. Sending an email, processing some file or responding to a third party service will keep our execution waiting for the task to finish and, as a consequence, our user waiting.&#xA;Using celery is one of the things you can do to &#xA;&#xA;<a class="markdown-link" href="https://coffeebytes.dev/en/software-architecture/how-to-scale-a-django-app-to-serve-one-million-users/">improve the performance of a Django application</a>&#xA;. And you can also create periodic tasks with celery and django.

How to use Django Framework asynchronously using Celery

Almost all complex Django applications need views for Login, Logout, reboot and password change, as well as user registration. However, both Django and Django REST Framework (DRF) are completely agnostic about their implementation, and delegate the responsibility for these functions to the users of their frameworks. Fortunately there are libraries that make this task quite simple.&#xA;If you are about to develop an API, I have a post with &#xA;&#xA;<a class="markdown-link" href="https://coffeebytes.dev/en/software-architecture/basic-characteristics-of-an-api-rest-api/">recommendations on REST API design</a>&#xA; that can be useful for you.

Login using Django Rest Framework DRF

We can use react memo and useCallback to prevent a component from being rendered, uselessly, multiple times by memoization. If you don&rsquo;t know what memoization is or don&rsquo;t understand what the react components, useCallback and memo are for, I have a post where I explain &#xA;&#xA;<a class="markdown-link" href="https://coffeebytes.dev/en/react/react-memo-usememo-and-usecallback-to-avoid-react-renderings/">React&rsquo;s useCallback, useMemo and memo, and what they are for</a>&#xA;.&#xA;&#xA;&#xA;&#xA; &#xA; &#xA; As of React 19 all these hooks are deprecated, so only use this post as a reference for legacy React versions, please do not implement these hooks in your application&#xA;&#xA;&#xA;Let&rsquo;s start our example with the following component:&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript">import ChildComponent from &#39;./ChildComponent&#39;&#xA;&#xA;const MyComponent = () =&gt; {&#xA; // callback va a ser diferente cada vez que este componente se renderice&#xA; const callback = () =&gt; {&#xA; return &#39;Texto del componente hijo&#39;&#xA; };&#xA; return &lt;ChildComponent callback={callback} /&gt;;&#xA;}&#xA;&#xA;export default MyComponent&#xA;</code></pre></div>Each time MyComponent is rendered, React will create a new function called callback, and pass it to ChildComponent, which will be rendered in turn.&#xA;The first step will be to memoize the child component, ChildComponent, so that it remains constant as long as its props do not change. To do this, just pass the component to the memo function and export it.&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript">import { memo } from &#34;react&#34;;&#xA;&#xA;const ChildComponent = ({ callback }) =&gt; {&#xA; const textoDelComponenteHijo = callback();&#xA; return &lt;div&gt;{textoDelComponenteHijo}&lt;/div&gt;;&#xA;};&#xA;&#xA;export default memo(ChildComponent)&#xA;</code></pre></div>As I mentioned before, every time React renders a component, its internal functions will be recreated, becoming a different prop for each child component that receives them.&#xA;To prevent the props from changing, we have to memoize the function that memo is receiving as a prop. How? Well, using the React hook useCallback&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript">import ChildComponent from &#39;./ChildComponent&#39;&#xA;import {useCallback} from &#39;react&#39;&#xA;&#xA;const MyComponent = ({ prop }) =&gt; {&#xA; const callback = useCallback(() =&gt; {&#xA; return &#39;Result&#39;&#xA; },[])&#xA; return &lt;ChildComponent callback={callback} /&gt;;&#xA;}&#xA;&#xA;export default MyComponent&#xA;</code></pre></div>Now the callback function will not change every time MyComponent is rendered, it will remain constant. Therefore, the memoized component, ChildComponent, will receive as prop the same function, always, avoiding its re-rendering every time MyComponent changes.&#xA;<h2 id="testing-the-effect-of-react-memo-and-usecallback">Testing the effect of React memo and useCallback</h2>&#xA;Still not clear? Check this example in a sandbox.&#xA;In the sandbox below, notice how the ChildComponent has a console.log method that writes to the terminal each time the component is rendered. If you write to the input you will notice that ChildComponent is not rendering with each key press.&#xA;Why? First, we are using memo in the ChildComponent to avoid renderings. Second, we are using useCallback to prevent the MyComponent function from changing, so memo always receives the same prop.&#xA;Now try the following in this sandbox:&#xA;&#xA;Remove only the memo function from the ChildComponent and write to the input. ChildComponent will re-render with each new key press. A new terminal message will appear for each rendering.&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript">// ChildComponent.js&#xA;export default ChildComponent;&#xA;</code></pre></div><a hx-boost="false" href="https://coffeebytes.dev/en/react/react-memo-usememo-and-usecallback-to-avoid-react-renderings/images/eliminandoMemo.gif">&#xA;<figure class="md-local-image"><img src="https://coffeebytes.dev/en/react/react-memo-usememo-and-usecallback-to-avoid-react-renderings/images/eliminandoMemo.gif"&#xA; loading="lazy"&#xA; alt="Removing memo from child component causes renderings">&#xA;</figure>&#xA;</a>&#xA;On the other hand, if you remove the useCallback hook, without removing memo, ChildComponent will still be re-rendered with each key press. This is because with each keystroke, MyComponent is re-rendered and the callback function is re-created, being a new function, memo re-renders the component.&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript">// MyComponent.js&#xA;const callback = () =&gt; {&#xA; return &#34;Texto del componente hijo&#34;;&#xA; };&#xA;</code></pre></div>Pay attention to the terminal to appreciate the renderings.&#xA;<a hx-boost="false" href="https://coffeebytes.dev/en/react/react-memo-usememo-and-usecallback-to-avoid-react-renderings/images/eliminandoUseCallback.gif">&#xA;<figure class="md-local-image"><img src="https://coffeebytes.dev/en/react/react-memo-usememo-and-usecallback-to-avoid-react-renderings/images/eliminandoUseCallback.gif"&#xA; loading="lazy"&#xA; alt="Remove useCallback from child component causing renderings">&#xA;</figure>&#xA;</a>&#xA;On the other hand, if you remove both memo and useCallback, the same thing will happen.&#xA;&#xA;<h2 id="avoiding-renderings-with-usememo">Avoiding renderings with useMemo</h2>&#xA;useMemo can also be used to avoid renderings. How? In the previous post I mentioned that every time a component is rendered new objects are created, and these objects are not the same, even if they have the same properties, with the same values.&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript">const A = {uno: 1, dos:2}&#xA;const B = {uno: 1, dos:2}&#xA;A===B&#xA;// false&#xA;</code></pre></div>Look at the following example, every time the component is re-rendered due to another component, or a change in the state, a new statsDelMonstruo object will be created. Every time that happens React will ask inside useEffect: &ldquo;Is the variable statsDelMonstruo the same as last time?&rdquo; And the answer will be &ldquo;no&rdquo;, because React creates a new object every time, even if this object has exactly the same values as its previous version, they are different objects.&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript">import ChildComponent from &#39;./ChildComponent&#39;&#xA;import {useCallback} from &#39;react&#39;&#xA;&#xA;const MyComponent = ({ prop }) =&gt; {&#xA; const [hp, setHp] = useValue(100)&#xA; const [mp, setMp] = useValue(100)&#xA; // otro valores de estado&#xA;&#xA; const statsDelMonstruo = { hp, mp }&#xA;&#xA; useEffect(()=&gt;{&#xA; console.log(statsDelMonstruo)&#xA; }, [statsDelMonstruo])&#xA;&#xA; return (&#xA; // Otros componentes&#xA; &lt;RenderizaMonstruo stats={statsDelMonstruo}/&gt;&#xA; );&#xA;}&#xA;&#xA;export default MyComponent&#xA;</code></pre></div>To solve this problem we can useMemo. Our memoizer function will keep the same object, as long as the values inside the square brackets do not change. Now, when React asks: &ldquo;Is the variable statsDelMonstruo the same as last time?&rdquo; the answer will be &ldquo;yes&rdquo;, it is the same variable, because as long as the variables in square brackets do not change, useMemo will return the same object in memory.&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript">import ChildComponent from &#39;./ChildComponent&#39;&#xA;import {useCallback} from &#39;react&#39;&#xA;&#xA;const MyComponent = ({ prop }) =&gt; {&#xA; const [hp, setHp] = useValue(100)&#xA; const [mp, setMp] = useValue(100)&#xA; // otro valores de estado&#xA;&#xA; const statsDelMonstruo = useMemo(()=&gt; {&#xA; return { hp, mp }&#xA; }, [hp, mp])&#xA;&#xA; useEffect(()=&gt;{&#xA; console.log(statsDelMonstruo)&#xA; }, [statsDelMonstruo])&#xA;&#xA; return (&#xA; // Otros componentes&#xA; &lt;RenderizaMonstruo stats={statsDelMonstruo}/&gt;&#xA; );&#xA;}&#xA;&#xA;export default MyComponent&#xA;</code></pre></div>If you want to go deeper into the subject I found an excellent &#xA;&#xA;<a class="markdown-link" href="https://www.youtube.com/watch?v=uojLJFt9SzY" rel="noopener" target="_blank">youtube video</a>&#xA; where they explain it quite well.&#xA;

We can use react memo and useCallback to prevent a component from being rendered, uselessly, multiple times by memoization. If you don&rsquo;t know what memoization is or don&rsquo;t understand what the react components, useCallback and memo are for, I have a post where I explain &#xA;&#xA;<a class="markdown-link" href="https://coffeebytes.dev/en/react/react-memo-usememo-and-usecallback-to-avoid-react-renderings/">React&rsquo;s useCallback, useMemo and memo, and what they are for</a>&#xA;.&#xA;&#xA;&#xA;&#xA; &#xA; &#xA; As of React 19 all these hooks are deprecated, so only use this post as a reference for legacy React versions, please do not implement these hooks in your application&#xA;

React memo, useMemo and useCallback to avoid React renderings

The useCallback, useMemo and memo functions are used to optimize React applications using memoization, avoiding useless renderings, each with their differences, similarities and use cases. These three functions should not be used indiscriminately, but only in those situations where their impact is less than the benefits they offer.&#xA;&#xA;&#xA;&#xA; &#xA; &#xA; As of React 19 all these hooks are deprecated, so only use this post as a reference for legacy React versions, please do not implement these hooks in your application&#xA;&#xA;&#xA;Visit my post where I share &#xA;&#xA;<a class="markdown-link" href="https://coffeebytes.dev/en/react/5-cool-react-libraries-you-should-know-about/">5 React libraries</a>&#xA; that you can&rsquo;t miss in your arsenal.&#xA;<h2 id="memoization-and-object-handling-in-javascript">Memoization and object handling in Javascript</h2>&#xA;Before we start moving on to functions there are two concepts you need to understand first: memoization and Javascript&rsquo;s handling of objects. Move on to the useCallback part if you have already mastered them.&#xA;<h3 id="what-is-memoization">What is memoization?</h3>&#xA;Memoize means to memorize a value to avoid processing it again, generally used to save you the cost of producing a value over and over again.&#xA;Imagine that you want to multiply the numbers 17 and 19. You would take paper and pen or a calculator, perform the relevant operations and obtain the result: 323. If you are asked again the value of that multiplication, you will not take a new paper and pen to calculate again, but you will recite the number 323, without calculating it, from memory.&#xA;As long as they keep asking you for the multiplication of 17 and 19 you will be able to return an answer without recalculating it. You have just memorized the result of multiplying 17 and 19 and you can return it without having to recalculate it.&#xA;Now I will explain how Javascript handles objects.&#xA;<h3 id="how-does-javascript-handle-objects">How does Javascript handle objects?</h3>&#xA;In Javascript, when we compare two native values we will get the same result. However, objects, including functions, are not considered equal, even if they are identical.&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript">2 === 2&#xA;true&#xA;&#39;hello world&#39; === &#39;hello world&#39;&#xA;true&#xA;const d = () =&gt; &#34;hello world&#34;&#xA;const c = () =&gt; &#34;hello world&#34;&#xA;d === c&#xA;false&#xA;//las funciones son idénticas, sin embargo, al ser objetos diferentes, no son iguales para JS&#xA;</code></pre></div>Another example:&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript">const A = {uno: 1, dos:2}&#xA;const B = {uno: 1, dos:2}&#xA;A===B&#xA;// false&#xA;</code></pre></div>Even if two objects are the same and have the same properties and values, since they are located at different memory addresses, they are considered two different objects by JavaScript.&#xA;&#xA;<h2 id="object-creation-in-react">Object creation in React</h2>&#xA;The above applies exactly the same in React. Every time React creates a function it is creating a new object, different from the previous one, even if they fulfill the same function, line by line.&#xA;Look at the following code, every time the MyComponent component is rendered, React will create a new function called callback, different from the last rendering.&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript">import { useCallback } from &#39;react&#39;;&#xA;&#xA;const MyComponent = ({prop}) =&gt; {&#xA; const callback = () =&gt; {&#xA; return &#39;Result&#39;&#xA; };&#xA; return &lt;ChildComponent callback={callback} /&gt;&#xA;}&#xA;</code></pre></div>Now that you know how JavaScript and React handle objects, let&rsquo;s get to the main topic.&#xA;<h2 id="differences-between-usecallback-usememo-and-memo">Differences between useCallback, useMemo and memo</h2>&#xA;To begin with we will say that useCallback, useMemo and memo are memoization functions, these functions will save us to recalculate something from scratch.&#xA;The basic differences between useCallback, useMemo and memo are summarized in the following table.&#xA;<ul>&#xA;<li>useCallback, memoizes functions, is a hook.</li>&#xA;<li>useMemo, memoizes values, it is a hook.</li>&#xA;<li>memo, memoizes components, it is a HOC.</li>&#xA;</ul>&#xA;<a hx-boost="false" href="https://coffeebytes.dev/en/react/react-memo-usememo-and-usecallback-to-avoid-react-renderings/images/Diferencias-React-useCallback-useMemo-memo.jpg">&#xA;<figure class="md-local-image"><img src="https://coffeebytes.dev/en/react/react-memo-usememo-and-usecallback-to-avoid-react-renderings/images/Diferencias-React-useCallback-useMemo-memo.jpg"&#xA; loading="lazy"&#xA; alt="Differences between useCallback, useMemo and memo">&#xA;</figure>&#xA;</a>&#xA;Together, &#xA;&#xA;<a class="markdown-link" href="https://coffeebytes.dev/en/react/react-memo-usememo-and-usecallback-to-avoid-react-renderings/">memo, useMemo and useCallback are used to avoid unnecessary renderings in React</a>&#xA;.&#xA;<h2 id="usecallback-memoize-functions">useCallback memoize functions</h2>&#xA;useCallback is a React hook that takes care of memoizing the functions so that they are not re-rendered when the components are mounted. It is very useful when transferring functions to child components.&#xA;The useCallback function accepts two arguments and returns a function. The first argument is the function to memoize and the second, like useEffect, is an array of variables to watch, so that React does not generate a new function with each rendering, as long as those variables do not change. As with useEffect we can also leave the array empty.&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript">import { useCallback } from &#39;react&#39;&#xA;&#xA;const MyComponent = ({prop}) =&gt; {&#xA; const callback = () =&gt; {&#xA; return &#39;Result&#39;&#xA; };&#xA; const memoizedCallback = useCallback(callback, [prop])&#xA; return &lt;ChildComponent callback={memoizedCallback} /&gt;&#xA;}&#xA;</code></pre></div>I repeat, as long as the prop that receives the component called Component, remains constant, a new function will not be created, no matter how much the component is re-rendered.&#xA;<h2 id="usememo-memoizes-values">useMemo memoizes values</h2>&#xA;This function is a React hook used to memoize the value returned by a function. The useMemo function accepts two arguments and returns a value. The first argument is the function and the second, like useCallback, is an array of variables to watch, so that a new value will not be generated as long as those variables do not change.&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript">import { useMemo } from &#39;react&#39;&#xA;&#xA;// Ideal para funciones costosas de ejecutar, como factoriales o cálculos complejos&#xA;const OtherComponent({value}) =&gt; {&#xA; const memoizedValue = useMemo(()=&gt;getExpensiveValue(value), [value])&#xA; return &lt;div&gt;...&lt;/div&gt;&#xA;}&#xA;</code></pre></div>Again, as long as value is kept constant, getExpensiveValue will not be executed with each rendering of the component, but the memoized value will be returned. As with useEffect we can also leave the array empty, instead of value.&#xA;<h2 id="memo-memoizes-components">memo memoizes components</h2>&#xA;Memo is not a hook, it is a High Order Component (HOC), i.e. a function that takes a component as a parameter and **returns a new component.&#xA;Memo checks if the props of the component it receives have changed, if they have not, it will return the memoized component, without rendering it again.&#xA;Again, unlike useCallback and useMemo, memo is not a hook, but a memoization function that runs on a component.&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript">import { memo } from &#39;react&#39;&#xA;&#xA;const MyComponent = ({id, title}) =&gt; {&#xA; return &lt;div&gt;{id}{title}&lt;/div&gt;&#xA;}&#xA;&#xA;export default memo(MyComponent)&#xA;</code></pre></div>For example, imagine we have the above component. As long as id and title do not change, the component named Component, will not be rendered once again, but its memoized value will be returned.&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript">import MyComponent from &#39;./MyComponent&#39;&#xA;&#xA;const ParentComponent = () =&gt; {&#xA; const {id, title} = getIdAndTitle()&#xA;&#xA; return(&#xA; &lt;&gt;&#xA; &lt;OtrosComponentes/&gt;&#xA; &lt;MyComponent id={id} title={title}/&gt;&#xA; &lt;/&gt;)&#xA;}&#xA;</code></pre></div><h3 id="memo-use-cases">memo use cases</h3>&#xA;Memo is ideal for components that:&#xA;<ul>&#xA;<li>Suffer multiple renderings with the use of the application and generally receive the same props.</li>&#xA;<li>Receive props that change infrequently or not at all.</li>&#xA;<li>Very bulky components that have a very large impact on performance.</li>&#xA;</ul>&#xA;Remember to check my post where I combine this &#xA;&#xA;<a class="markdown-link" href="https://coffeebytes.dev/en/react/react-memo-usememo-and-usecallback-to-avoid-react-renderings/">memo and useCallback to avoid renderings in React</a>&#xA;.&#xA;See the &#xA;&#xA;<a class="markdown-link" href="https://es.reactjs.org/docs/hooks-reference.html" rel="noopener" target="_blank">official React hooks documentation</a>&#xA; if you want to learn more about it.&#xA;

The useCallback, useMemo and memo functions are used to optimize React applications using memoization, avoiding useless renderings, each with their differences, similarities and use cases. These three functions should not be used indiscriminately, but only in those situations where their impact is less than the benefits they offer.&#xA;&#xA;&#xA;&#xA; &#xA; &#xA; As of React 19 all these hooks are deprecated, so only use this post as a reference for legacy React versions, please do not implement these hooks in your application&#xA;

React useCallback, useMemo and memo, differences

Do you need to get the data associated with a postal code in Mexico for your Django application? I wrote a small library called django-postalcodes-mexico that downloads postal codes from SEPOMEX (México&rsquo;s Postal Codes official site) and creates an API endpoint that allows you to query a postal code in Mexico and receive the colonias that belong to that postal code, as well as their state and municipality.&#xA;If you are going to develop a REST API, I have a post with multiple &#xA;&#xA;<a class="markdown-link" href="https://coffeebytes.dev/en/software-architecture/basic-characteristics-of-an-api-rest-api/">REST API design recommendations</a>&#xA; that may help you.&#xA;For this example I use Python 3.8, Django 3.2.5 and Pipenv version 2020.5.28.&#xA;<h2 id="installation">Installation</h2>&#xA;To install it we are going to use &#xA;&#xA;<a class="markdown-link" href="https://coffeebytes.dev/en/python/pipenv-the-virtual-environment-manager-you-dont-know/">Pipenv</a>&#xA;, but you can use Poetry, &#xA;&#xA;<a class="markdown-link" href="https://coffeebytes.dev/en/python/python-virtualenv-linux-basic-tutorial/">pip</a>&#xA; or any other virtual environment manager.&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash">pip install django-postalcodes-mexico django&#xA;django-admin startproject codigosPostalesMx .&#xA;python manage.py migrate&#xA;</code></pre></div>Next we install the package by adding it to INSTALLED_APPS in our configuration file.&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash">INSTALLED_APPS = [&#xA; &#39;django_postalcodes_mexico.apps.DjangoPostalcodesMexicoConfig&#39;,&#xA;]&#xA;</code></pre></div>We execute the migrations. This will create the tables needed to manage the postal codes.&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash">python manage.py migrate&#xA;</code></pre></div>&#xA;<h2 id="obtaining-mexicos-postal-codes-from-sepomex">Obtaining Mexico&rsquo;s postal codes from SEPOMEX</h2>&#xA;Now that the tables have been created we are going to install the Mexico postal codes directly from the SEPOMEX page with a single Django command.&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash">python manage.py importpostalcodesmx&#xA;Trying to connect to Mexican Postal Service (Correos de Mexico)&#xA;Response received&#xA;This process can take a few minutes, please be patient&#xA;Creating database...&#xA;The postal code database has been successfully populated&#xA;</code></pre></div>That&rsquo;s all, now we just need to import include and add our urls. I put the path api/ but you can use the one you want.&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash">from django.contrib import admin&#xA;from django.urls import path, include&#xA;&#xA;from django_postalcodes_mexico import urls as django_postalcodes_mexico_urls&#xA;&#xA;urlpatterns = [&#xA; # ...&#xA; path(&#39;api/&#39;, include(django_postalcodes_mexico_urls)),&#xA;]&#xA;</code></pre></div><h2 id="obtaining-information-from-a-postal-code">Obtaining information from a postal code</h2>&#xA;If we now make a request api/09000/ or any other 5-digit postal code we will receive a JSON response with the municipality, state and a list of neighborhoods.&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash">curl localhost:8000/api/09000/&#xA;{&#34;codigoPostal&#34;: &#34;09000&#34;, &#34;municipio&#34;: &#34;Iztapalapa&#34;, &#34;estado&#34;: &#34;Ciudad de M\u00e9xico&#34;, &#34;colonias&#34;: [&#34;La Asunci\u00f3n&#34;, &#34;San Ignacio&#34;, &#34;San Jos\u00e9&#34;, &#34;San Lucas&#34;, &#34;San Pablo&#34;, &#34;San Pedro&#34;, &#34;Santa B\u00e1rbara&#34;]}&#xA;</code></pre></div><a hx-boost="false" href="https://coffeebytes.dev/en/django/mexico-postal-codes-api-with-django/images/Api-codigos-postales-mx.png">&#xA;<figure class="md-local-image"><img src="https://coffeebytes.dev/en/django/mexico-postal-codes-api-with-django/images/Api-codigos-postales-mx.png"&#xA; loading="lazy"&#xA; alt="Django API query result for postal code &#34;09000&#34;"><figcaption>&#xA; Django API query result for postal code 09000&#xA; </figcaption>&#xA;</figure>&#xA;</a>&#xA;A non-existent postal code will return a 404 status.&#xA;<a hx-boost="false" href="https://coffeebytes.dev/en/django/mexico-postal-codes-api-with-django/images/Captura-de-pantalla-de-2021-11-17-12-15-24.png">&#xA;<figure class="md-local-image"><img src="https://coffeebytes.dev/en/django/mexico-postal-codes-api-with-django/images/Captura-de-pantalla-de-2021-11-17-12-15-24.png"&#xA; loading="lazy"&#xA; alt="Nonexistent postal code returning an error message"><figcaption>&#xA; Nonexistent postal code returning an error message&#xA; </figcaption>&#xA;</figure>&#xA;</a>&#xA;While an invalid postal code will return a 400 error and an error message&#xA;<a hx-boost="false" href="https://coffeebytes.dev/en/django/mexico-postal-codes-api-with-django/images/Codigo-postal-invalido.png">&#xA;<figure class="md-local-image"><img src="https://coffeebytes.dev/en/django/mexico-postal-codes-api-with-django/images/Codigo-postal-invalido.png"&#xA; loading="lazy"&#xA; alt="Invalid postal code returning an error"><figcaption>&#xA; Invalid postal code returning an error&#xA; </figcaption>&#xA;</figure>&#xA;</a>&#xA;Read the short &#xA;&#xA;<a class="markdown-link" href="https://github.com/EduardoZepeda/django-postalcodes-mexico" rel="noopener" target="_blank">official documentation in my github repository</a>&#xA; for more information.&#xA;

Do you need to get the data associated with a postal code in Mexico for your Django application? I wrote a small library called django-postalcodes-mexico that downloads postal codes from SEPOMEX (México&rsquo;s Postal Codes official site) and creates an API endpoint that allows you to query a postal code in Mexico and receive the colonias that belong to that postal code, as well as their state and municipality.&#xA;If you are going to develop a REST API, I have a post with multiple &#xA;&#xA;<a class="markdown-link" href="https://coffeebytes.dev/en/software-architecture/basic-characteristics-of-an-api-rest-api/">REST API design recommendations</a>&#xA; that may help you.

Mexico Postal codes API with Django

The other day I was testing a library called htmx, which promises to make web creation much easier, yes, another library, but with the difference that this one doesn&rsquo;t need you to write Javascript (JS) and it also combines quite well with Django. Htmx bases all its operation on writing attributes in your HTML tags, which are responsible for abstracting all the JS that runs behind the scenes. The result is code consisting only of HTML tags and their attributes, with no JS code (well, maybe just a little). No, you don&rsquo;t have to abandon all the JS, don&rsquo;t worry, you can also combine htmx with your favorite libraries and vanilla JS code.

Django and htmx, modern web apps without writing JS

JWTs (JSON Web Tokens) have become extremely popular, some even consider them a replacement for the classic tokens used by other frameworks, such as the Django Rest Framework. Using JWT or regular tokens (SWT) allows you to store all your session information directly on the token and they are also cryptographically signed, sounds good doesn&rsquo;t it?&#xA;<h2 id="what-is-jwt">What is JWT?</h2>&#xA;JWT is a standard for the creation of JSON-based access tokens for the exchange of information between two parties. These tokens, and their content, can be verified because they are digitally signed. This cryptographic signature guarantees that the content has not been altered and that the issuer is who they say they are. This makes them perfect for:

Django Rest Framework and JWT to authenticate users

A Manager (or handler) is the interface through which query operations or queries from the database are provided to Django models. Yes, I mean that objects that goes after the name of your model; YourModel.objects.all() and Tumodel.objects.filter(). All Django models have at least one manager. Whenever you use the object manager (I will refer to it as manager from here on) in a database query using the Django ORM you are making use of its default object manager. These managers in Django can be customized to modify the objects returned by a query and we can customize them to our liking.&#xA;Before you start, if you don&rsquo;t know the basics of Django you can start with &#xA;&#xA;<a class="markdown-link" href="https://coffeebytes.dev/en/django/the-definitive-guide-to-django/">the definitive guide to Django</a>&#xA;&#xA;On the other hand, if you are looking to optimize your Django app, probably my post where I talk about how to &#xA;&#xA;<a class="markdown-link" href="https://coffeebytes.dev/en/software-architecture/how-to-scale-a-django-app-to-serve-one-million-users/">improve performance of slow Django apps</a>&#xA; will serve you better.&#xA;<h2 id="the-django-object-manager">The Django object manager</h2>&#xA;If you have used the Django ORM, you have probably already used the default manager. Objects is the name of the default manager and is responsible for returning all objects in a Django model.&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-python" data-lang="python">Videogame.objects.all()&#xA;</code></pre></div>&#xA;<h2 id="modifying-the-default-manager">Modifying the default manager</h2>&#xA;Perhaps we want to have two managers, one that returns all objects and another that returns the most recent objects, or objects created by a particular user, or objects filtered by a term.&#xA;Let&rsquo;s start by modifying the name of the default manager, to do so we just have to assign it to the Manager object of models.&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-python" data-lang="python">from django.db import models&#xA;&#xA; class Videogame(models.Model):&#xA; ...#&#xA; stem = models.Manager() #Esto te permitira llamar Videogame.stem.all() en lugar de Videogame.objects.all()&#xA;</code></pre></div>What is this for? Well, we can now call the object manager in a different way, which may improve the readability of our code, but it is not the most important reason.&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-python" data-lang="python">Videogame.stem.all()# En lugar de Videogame.objects.all()&#xA;</code></pre></div><h2 id="adding-methods-to-a-django-manager">Adding methods to a Django manager</h2>&#xA;A custom manager allows us to add new methods, which will give it unique behaviors. How? You can filter the results of a search, limit the results according to the user, a range of dates, a number of results, whatever you prefer.&#xA;Look at this example below, we instantiate a new manager called VideogameManager, which inherits from models.Manager. We add a method called count_titles that will be in charge of counting the results for a given search, nothing too complicated, we simply concatenate a filter with a query, as if it were any search.&#xA;Since we have this new manager with the count_titles method, we replace the objects property of our Videogame model with an instance of the manager we just created.&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-python" data-lang="python">from django.db import models&#xA;&#xA; class VideogameManager(models.Manager):&#xA; def contar_titulos(self, keyword):&#xA; return self.filter(titulo__icontains=keyword).count()&#xA; #self se refiere al manager en sí mismo&#xA; class Videogame(models.Model):&#xA; …&#xA; objects = VideogameManager() #Renombra al manager por defecto aquí se usa objects para ser consistente&#xA;</code></pre></div>Now our default manager, objects, has a method called count_titles that we can use as if it were part of the original Django ORM.&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-python" data-lang="python">Videogame.objects.contar_titulos(&#39;fantasy&#39;)&#xA;</code></pre></div><h2 id="modifying-the-initial-manager-querysets">Modifying the initial Manager QuerySets</h2>&#xA;A Manager&rsquo;s base QuerySet returns all objects in the system. But what if we are only interested in certain data? Imagine that the online store has a database of all video games, but, since we are basic geeks, we gave the squarenix company a special section.&#xA;If we write individual custom queries for each queryset in that section it would look something like this:&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-python" data-lang="python">Videogames.objects.filter(company=&#34;squarenix&#34;).filter(titulo__icontains=&#34;Fantasy&#34;)&#xA;# ...&#xA;Videogames.objects.filter(company=&#34;squarenix&#34;).filter(descripcion__icontains=&#34;Aventura&#34;)&#xA;# ...&#xA;Videogames.objects.filter(company=&#34;squarenix&#34;).filter(genero=&#34;RPG&#34;)&#xA;</code></pre></div>As you know, the above repeats too much code, violating the DRY maxim.&#xA;We can replace the base QuerySet by overwriting the Manager.get_query_set() method so that the default queryset we get does the filtering by company name.&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-python" data-lang="python">from django.db import models&#xA;&#xA; # Primero, definimos una subclase para el Manager.&#xA; class SquarenixManager(models.Manager):&#xA; def get_query_set(self):&#xA; return super(SquarenixManager, self).get_query_set().filter(company=&#39;squarenix&#39;)&#xA;&#xA; # Despues lo anclamos al modelo Videogame explícitamente.&#xA; class Videogame(models.Model):&#xA; # ...&#xA; objects = models.Manager() # El manager predeterminado.&#xA; squarenix_videogames = SquarenixManager() # Nuestro manager&#xA;</code></pre></div>Note how we now have two managers. A Model can define several managers, the first manager that appears is the default manager (in the example above it is objects), which will be used by Django internally for other special features.&#xA;When running the manager it will return only the books that have Squarenix as company and, in addition, you can use all QuerySet methods on it.&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-python" data-lang="python">Videogame.objects.all() # Devuelve todos los videojuegos&#xA;Videogame.squarenix_videogames.all() # Devuelve solo los videojuegos de squarenix&#xA;Videogame.squarenix_videogames.filter(titulo__icontains=&#39;Kingdom Hearts&#39;) #Devuelve los videojuegos de squarenix cuyo título contenga Kingdom Hearts&#xA;</code></pre></div>And that&rsquo;s all. Now that you know that you can create as many managers as you want that will give you as many filtered searches as you need.&#xA;If you want to know more about managers, please check &#xA;&#xA;<a class="markdown-link" href="https://docs.djangoproject.com/en/3.2/topics/db/managers/" rel="noopener nofollow" target="_blank">the official Django documentation</a>&#xA;&#xA;

A Manager (or handler) is the interface through which query operations or queries from the database are provided to Django models. Yes, I mean that objects that goes after the name of your model; YourModel.objects.all() and Tumodel.objects.filter(). All Django models have at least one manager. Whenever you use the object manager (I will refer to it as manager from here on) in a database query using the Django ORM you are making use of its default object manager. These managers in Django can be customized to modify the objects returned by a query and we can customize them to our liking.

Managers or custom handlers in Django

What if a user&rsquo;s finger slips on the keyboard and types &ldquo;parfume&rdquo; instead of &ldquo;perfume&rdquo;. We probably don&rsquo;t want our user to leave the site because he didn&rsquo;t find any &ldquo;parfume&rdquo; on our website. Our website should return the results that most closely match what they are looking for. See how an experienced ecommerce handles it:&#xA;<a hx-boost="false" href="https://coffeebytes.dev/en/django/trigrams-and-advanced-searches-with-django-and-postgres/images/busquedaLaptopAmazon.gif">&#xA;<figure class="md-local-image"><img src="https://coffeebytes.dev/en/django/trigrams-and-advanced-searches-with-django-and-postgres/images/busquedaLaptopAmazon.gif"&#xA; loading="lazy"&#xA; alt="Search for the word &#34;parfume&#34; on amazon">&#xA;</figure>&#xA;</a>&#xA;Don&rsquo;t you remember the basic searches in Django? I have a post about &#xA;&#xA;<a class="markdown-link" href="https://coffeebytes.dev/en/django/full-text-search-and-searches-with-django-and-postgres/">basic searches and full text search using Django and Postgres</a>&#xA;, if you haven&rsquo;t read it take a look there first.&#xA;<h2 id="trigrams-in-django-and-postgres">Trigrams in Django and Postgres</h2>&#xA;But how does our application know that when a user types &ldquo;parfume&rdquo; they probably mean &ldquo;perfume&rdquo;?&#xA;The reason why parfume resembles perfume is because both contain similar trigrams.&#xA;Trigram? Yes, trigram, of three and gram. **A trigram is three consecutive characters, it&rsquo;s as simple as that.&#xA;<a hx-boost="false" href="https://res.cloudinary.com/dwrscezd2/image/upload/v1750289287/coffee-bytes/trigrams_tqmzs7.jpg">&#xA;<figure class="md-local-image"><img src="https://res.cloudinary.com/dwrscezd2/image/upload/v1750289287/coffee-bytes/trigrams_tqmzs7.jpg"&#xA; loading="lazy"&#xA; alt="Automata trigrams schematic">&#xA;</figure>&#xA;</a>&#xA;Trigrams are three consecutive characters&#xA;&#xA;<h2 id="trigrams-and-similar-words">Trigrams and similar words</h2>&#xA;According to &#xA;&#xA;<a class="markdown-link" href="https://www.postgresql.org/docs/12/pgtrgm.html" rel="noopener" target="_blank">Postgres</a>&#xA;, we can tell how similar two strings are by comparing the number of trigrams they share, and Django provides functions to work with trigrams.&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-python" data-lang="python">Videogame.objects.filter(name__trigram_similar=&#34;automatta&#34;) # it should say automata&#xA;&lt;QuerySet [&lt;Videogame: Nier automata&gt;]&gt;&#xA;Videogame.objects.filter(name__trigram_similar=&#34;autommattaa&#34;) # it should say automata&#xA;&lt;QuerySet [&lt;Videogame: Nier automata&gt;]&gt;&#xA;#...FROM &#34;videogame_videogame&#34; WHERE UNACCENT(&#34;videogame_videogame&#34;.&#34;name&#34;) % UNACCENT(autommata)&#xA;</code></pre></div>View the trigrams for the word &ldquo;automata&rdquo; directly from the postgres terminal&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-sql" data-lang="sql">SELECT show_trgm(&#39;automata&#39;);&#xA; show_trgm &#xA;---------------------------------------------&#xA; {&#34; a&#34;,&#34; au&#34;,ata,aut,mat,oma,&#34;ta &#34;,tom,uto}&#xA;</code></pre></div>Now look at the trigrams for &ldquo;automatta&rdquo; (if you didn&rsquo;t notice, this one has a double &ldquo;t&rdquo;).&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-sql" data-lang="sql">SELECT show_trgm(&#39;autommattaa&#39;);&#xA; show_trgm &#xA;---------------------------------------------------------&#xA; {&#34; a&#34;,&#34; au&#34;,&#34;aa &#34;,att,aut,mat,mma,omm,taa,tom,tta,uto}&#xA;</code></pre></div>Can you notice how they both share some trigrams (a, au, aut, mat, tom, uto)?&#xA;<a hx-boost="false" href="https://res.cloudinary.com/dwrscezd2/image/upload/v1750289287/coffee-bytes/trigrams-intersection_cnapb1.jpg">&#xA;<figure class="md-local-image"><img src="https://res.cloudinary.com/dwrscezd2/image/upload/v1750289287/coffee-bytes/trigrams-intersection_cnapb1.jpg"&#xA; loading="lazy"&#xA; alt="Shared trigrams between two text strings">&#xA;</figure>&#xA;</a>&#xA;Also note that the quotation marks around certain trigrams are to specify trigrams with spaces.&#xA;The number of trigrams shared by a pair of text strings can be expressed by means of an index. The more trigrams shared, the higher this index will be.&#xA;We can find the similarity index, according to their trigrams, between two words from the postgres terminal.&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-sql" data-lang="sql">SELECT word_similarity(&#39;outer worlds&#39;, &#39;wilds&#39;);&#xA; word_similarity &#xA;-----------------&#xA; 0.1875&#xA;</code></pre></div><h3 id="sort-by-similarity-with-trigrams">Sort by similarity with trigrams</h3>&#xA;What if we want our Django search to find even those words that match in a smaller number of trigrams?&#xA;Using the Django ORM with the TrigramSimilarity function we can filter those results by setting a similarity threshold between a search word and our data.&#xA;If you don&rsquo;t remember what Django annotate is for, I have a post where I explain &#xA;&#xA;<a class="markdown-link" href="https://coffeebytes.dev/en/django/django-annotate-and-aggregate-explained/">django annotate and aggregate, as well as their differences</a>&#xA;&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-python" data-lang="python">from django.contrib.postgres.search import TrigramSimilarity&#xA;&#xA;results = Videogame.objects.annotate(similarity=TrigramSimilarity(&#39;name&#39;, &#39;wilds&#39;), ).filter(similarity__gt=0.1).order_by(&#39;-similarity&#39;)&#xA;&lt;QuerySet [&lt;Videogame: Outer wilds&gt;, &lt;Videogame: Outer worlds&gt;]&gt; # With a similarity index of 0.1, the words wilds y worlds match&#xA;results[0].similarity&#xA;# 0.5&#xA;# ...SIMILARITY(&#34;videogame_videogame&#34;.&#34;name&#34;, wilds) AS &#34;similarity&#34; FROM &#34;videogame_videogame&#34; WHERE SIMILARITY(&#34;videogame_videogame&#34;.&#34;name&#34;, wilds) &gt; 0.1 ORDER BY &#34;similarity&#34; DESC&#xA;</code></pre></div><h2 id="search-rank-to-sort-by-relevance">Search rank to sort by relevance</h2>&#xA;If a user searches for a laptop and your application first shows them laptop cases, laptop backpacks, other related items and then laptops, you are providing an inadequate user experience.&#xA;<a hx-boost="false" href="https://coffeebytes.dev/en/django/trigrams-and-advanced-searches-with-django-and-postgres/images/busquedaLaptopAmazon.gif">&#xA;<figure class="md-local-image"><img src="https://coffeebytes.dev/en/django/trigrams-and-advanced-searches-with-django-and-postgres/images/busquedaLaptopAmazon.gif"&#xA; loading="lazy"&#xA; alt="Search for the word &#34;laptop&#34; on amazon">&#xA;</figure>&#xA;</a>&#xA;Search Rank allows you to sort user searches by relevance, so that your user finds exactly what they are looking for first and then everything else.&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-python" data-lang="python">from django.contrib.postgres.search import SearchQuery, SearchRank, SearchVector&#xA;&#xA;vector = SearchVector(&#39;name&#39;)&#xA;query = SearchQuery(&#39;days&#39;)&#xA;results = Videogame.objects.annotate(rank=SearchRank(vector, query)).order_by(&#39;-rank&#39;)&#xA;results[0].rank&#xA;# 0.0607927&#xA;# ... ts_rank(to_tsvector(COALESCE(&#34;videogame_videogame&#34;.&#34;name&#34;, )), plainto_tsquery(days)) AS &#34;rank&#34; FROM &#34;videogame_videogame&#34; ORDER BY &#34;rank&#34; DESC&#xA;</code></pre></div>Search Rank, with the help of the to_tsvector and plainto_tsquery function, will sort our search results according to the matches it finds between the vector and the query and **return each of the results of our query with a rank property that shows the value for its respective element.&#xA;<h3 id="assign-importance-by-field">Assign importance by field</h3>&#xA;In a search, not all fields should matter equally&#xA;Imagine you have a database of books and a Book model with a “title” field and a “description” field. If a user searches for a book, it would be reasonable to assume that they are searching for the title. Based on the above, the correct thing to do would be to return books that contain their query in the title.&#xA;On the other hand, the user may be searching for some words they remember reading on the back cover, or they may be searching for anything that contains their query. We can also search the “description” field but with a lower weighting, showing them matches with the title first and then those that match the description.&#xA;<a hx-boost="false" href="https://res.cloudinary.com/dwrscezd2/image/upload/v1750290636/coffee-bytes/search-weights-postgres-django_mix86s.jpg">&#xA;<figure class="md-local-image"><img src="https://res.cloudinary.com/dwrscezd2/image/upload/v1750290636/coffee-bytes/search-weights-postgres-django_mix86s.jpg"&#xA; loading="lazy"&#xA; alt="Explanation of relevance according to the field">&#xA;</figure>&#xA;</a>&#xA;With Posgres the above is possible.&#xA;To do this, we assign a weight, weighting, priority or whatever you want to call it, in the form of a letter, to each search vector, together with the name of the field to which it corresponds, and we join them into one.&#xA;We can choose between the letters &ldquo;A&rdquo;, &ldquo;B&rdquo;, &ldquo;C&rdquo; and &ldquo;D&rdquo;. Each letter will have a different value of relevance in our search; &ldquo;A&rdquo; for the highest value and &ldquo;D&rdquo; for the lowest.&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-python" data-lang="python">from django.contrib.postgres.search import SearchQuery, SearchRank, SearchVector&#xA;vector = SearchVector(&#39;title&#39;, weight=&#39;A&#39;) + SearchVector(&#39;descripcion&#39;, weight=&#39;B&#39;)&#xA;query = SearchQuery(&#39;Science fiction&#39;)&#xA;Book.objects.annotate(rank=SearchRank(vector, query)).filter(rank__gte=0.3).order_by(&#39;rank&#39;)&#xA;</code></pre></div>Exactly they have the following values:&#xA;<ul>&#xA;<li>D = 0.1</li>&#xA;<li>C = 0.2</li>&#xA;<li>B = 0.4</li>&#xA;<li>A = 1.0</li>&#xA;</ul>&#xA;These values can be overwritten to suit your needs, according to the type of business and models you use.&#xA;<div class="highlight"><pre tabindex="0" style="color:#e2e4e5;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-python" data-lang="python">Book.objects.annotate(rank=SearchRank(vector, query), weights=[0.1, 0.2, 0.3, 0.9]).filter(rank__gte=0.3).order_by(&#39;rank&#39;).filter(rank__gte=0.3).order_by(&#39;rank&#39;)&#xA;</code></pre></div>In the example above, I have rewritten the original values and decreased the values of the letters &ldquo;D&rdquo;, &ldquo;C&rdquo;, &ldquo;B&rdquo; so that they represent a much smaller percentage compared to the letter &ldquo;A&rdquo;.&#xA;<h2 id="django-libraries-for-advanced-searches">Django Libraries for advanced searches</h2>&#xA;Perhaps your search needs are much more advanced than those provided by the Django ORM combined with Postgres. But, unless you are developing something that will revolutionize the search industry, someone has already gone through the same problem. There are generic solutions, such as &#xA;&#xA;<a class="markdown-link" href="https://coffeebytes.dev/en/django/searches-with-solr-with-django-haystack/">Solr and Django-haystack</a>&#xA;, that save you from writing many, many lines of code. Some examples are:&#xA;<ul>&#xA;<li>&#xA;&#xA;<a class="markdown-link" href="https://xapian.org/" rel="noopener nofollow" target="_blank">Xapian</a>&#xA;</li>&#xA;<li>&#xA;&#xA;<a class="markdown-link" href="https://whoosh.readthedocs.io/en/latest/intro.html" rel="noopener nofollow" target="_blank">Whoosh</a>&#xA;</li>&#xA;<li>&#xA;&#xA;<a class="markdown-link" href="https://django-haystack.readthedocs.io/en/master/index.html" rel="noopener nofollow" target="_blank">Django haystack</a>&#xA;</li>&#xA;<li>&#xA;&#xA;<a class="markdown-link" href="https://github.com/etianen/django-watson" rel="noopener nofollow" target="_blank">Django watson</a>&#xA;</li>&#xA;</ul>&#xA;

What if a user&rsquo;s finger slips on the keyboard and types &ldquo;parfume&rdquo; instead of &ldquo;perfume&rdquo;. We probably don&rsquo;t want our user to leave the site because he didn&rsquo;t find any &ldquo;parfume&rdquo; on our website. Our website should return the results that most closely match what they are looking for. See how an experienced ecommerce handles it:&#xA;<a hx-boost="false" href="https://coffeebytes.dev/en/django/trigrams-and-advanced-searches-with-django-and-postgres/images/busquedaLaptopAmazon.gif">&#xA;<figure class="md-local-image"><img src="https://coffeebytes.dev/en/django/trigrams-and-advanced-searches-with-django-and-postgres/images/busquedaLaptopAmazon.gif"&#xA; loading="lazy"&#xA; alt="Search for the word &#34;parfume&#34; on amazon">&#xA;</figure>&#xA;</a>&#xA;Don&rsquo;t you remember the basic searches in Django? I have a post about &#xA;&#xA;<a class="markdown-link" href="https://coffeebytes.dev/en/django/full-text-search-and-searches-with-django-and-postgres/">basic searches and full text search using Django and Postgres</a>&#xA;, if you haven&rsquo;t read it take a look there first.

Eduardo Zepeda's latests posts