DEV Community: Martín Mato

JS being odd. Some weird things about javascript.

Martín Mato — Tue, 30 Mar 2021 15:44:58 +0000

Many of us will agree that Javascript is one of the best languages around, but sometimes some things can make us some headaches.

Here is a list of five weird things Javascript has. Please feel free to add your favorites in the comments.

`null` acting weird.

As the documentation said, The value null represents the intentional absence of any object value. But if I tell you null is an object? Just check by yourself.

console.log(typeof null) // log: object

Weird, right?. But don't worry, it doesn't look so weird when we check that null is not an instance of an object, making its definition valid.

console.log(null instanceof Object) // log: false

Side note: [] also is an object but, in that case, is an instance of an object too.

Number literals as objects

Except for null and undefined, everything in Javascript acts like an object, and number literals are not the exception.

So, try this:

console.log(10.toString())

Is failing, right? You probably will see an error similar to this: error: unknown: Identifier directly after number (1:15).
This is happening because javascript's parser will read the . notation as a floating-point and fail. To avoid this, here are some workarounds.

console.log(10..toString()) 
console.log((10).toString())

`NaN` is a number.

Yes, I know, the literal definition of NaN is "Not a Number," but:

console.log(typeof NaN); // Will return number

and not only that

console.log(NaN == NaN) // Will return false.

This could be because NaN is not equal to anything, being isNaN() the only way to check for it.

Be careful with `parseInt()`

parseInt will take any string and parse it to an integer of the specified base we pass as the second parameter.

console.log(parseInt("10", 10)); // will return 10  
console.log(parseInt("flowers")); // will return NaN

But look if we change the base in the last statement:

console.log(parseInt("flowers", 16)); // will return 15

Even the word "flowers" is not a valid hex parseInt() will evaluate character by character instead of the entire word, so in this case, is returning the value for the f.

Check your `return`

Consider the following code:

function example() {
  return
  {
    value: "string"
  }
}

console.log(example()); // Logs: undefined

Just by being minimally familiar with javascript, you will realize something strange in that new line after the return statement.
What in many languages can be a style issue in JS has another effect. JS, behind curtains, inserts a semicolon after most newlines causing in the example that we never reach to return the object. So if we want to make it right:

function example() {
  return {
    value: "string"
  }
}

console.log(example()); // Logs: {value:"string"}

Finishing up

These were only a few of tens of weird things Javascript has to offer. I promise I will add some other later.
Please comment on which other do you know and if they gave you a hard time.

Thanks for reading!

React Query - A practical example.

Martín Mato — Tue, 23 Mar 2021 21:36:37 +0000

Hello fellow developers!

Since the appearance of new features in React, such as "Hooks" and "Context,” we began to find Redux substitutes when we managed our app’s state. I made a small example of using React Query for this purpose in this opportunity, and I will talk about some great features it has.

OtamNitram / movies-react-query

Welcome to movies-react-query 👋

An example of react app using react-query and tailwind CSS

Prerequisites

node >=14.15.4 <15.0
npm >=7.0.0

Install

npm install

Usage

npm run start

Run tests

npm run test

Author

👤 Martin Mato

Website: https://www.linkedin.com/in/martinmato/
Twitter: @otamnitram
Github: @otamnitram
LinkedIn: @martinmato

Show your support

Give a ⭐️ if this project helped you!

View on GitHub

To have real data, I used The movies database API to fetch data. You need to register yourself and ask for an API token that you can use in my repo.

How to use React Query?

Fetching data.

If you want to fetch data to be used in the app, it can be done very easily.
React Query provides us the useQuery hook to fetch and control de state of the retrieved data.


 Javascript
 import { useQuery } from 'react-query'

 function App() {
   const { isLoading, isError, data, error } = useQuery('movies', fetchMovies)
 }

In the example above, fetchMovies is our async call that will return an array with all the movies; this can be an Axios call or a simple fetch. The useQuery hook result contains some states we can use in our app.

isLoading will be true when the query has no data yet, very useful to render a spinner while you can't show data to the user yet.
isError will be true if the async call returned an error, and, of course, the error state will give us more information about it. This is helpful if we need to render some error message when things go wrong.
data will bring us the result of the async call, and we can use it to render our data and show it to the user.

If you didn't notice, we never used anything but the useQuery hook. We didn't use things such a useEffect to pull the data to an useState constant. React Query does all of that behind curtains for us.

If you need more info, check the documentation

Modifying data in the server.

Now imagine that you are already fetching and showing the movie data, and you want to add a new movie to the server and, of course, to the list.

To do so, first, you need to declare a new queryCLient to have access to the cache. If you want to provide the same client through all the app, you maybe want to use QueryClientProvider.

Once you have a new queryClient, we can use the useMutation hook to create a new movie.


 javascript
function MoviesList() {
  // Access the client
  const queryClient = useQueryClient();

  // Queries
  const query = useQuery('movies', getMovies);

  // Mutations
  const mutation = useMutation(postMovie, {
    onSuccess: () => {
      queryClient.invalidateQueries('movies');
    },
  });

  return (
    <div>
      <ul>
        {query.data.map((movie) => (
          <li key={movie.id}> {movie.title} </li>
        ))}
      </ul>
      <button
        onClick={() => {
          mutation.mutate({
            id: Date.now(),
            title: 'Terminator',
          });
        }}
      >
        Add Movie
      </button>
    </div>
  );
}

There are some important things in the code above.
We declared our mutation very similar as we declare our queries. To use it, we call the mutate function and pass the payload as parameters. Once the async call is done, we can use the onSuccess option and invalidate the query we were using and refetch the data again by calling invalidateQueries.

Similar to the useQuery hook, the useMutation hook also came with useful states in its response.


 javascript
const { isLoading, isError, error, data, isSuccess } = useMutation(postMovie, {
  onSuccess: () => {
    queryClient.invalidateQueries('movies');
  },
});

We can use isLoading to indicate that something is being posted to the server. data will give us the response of the async call. isError and error will give us information in case something wrong happens.

For more information, check the documentation

Pagination and "Load More"

In my example in the github repo I wanted to fetch all the movies, but the API forced me to fetch page by page. Thankfully, React Query also has a solution for this kind of case.

Very similar to when we use the useQuery hook, we can use the useInfiniteQuery, which has more useful state properties and a different and more suitable way to handle the data.



const {
    data,
    error,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
    status,
  } = useInfiniteQuery('movies', getPopularMovies, {
    getNextPageParam: (lastPage) =>
      lastPage.page < lastPage.total_pages ? lastPage.page + 1 : undefined,
  });

The first difference with useQuery is the structure of the retrieved data. data contains data.pages that is an array of all the pages retrieved where every page contains what you retrieved in the API. data.pageParams has all the parameters used to fetch the pages.

My getPopularMovies expect a parameter with the next page's number to be fetched behind the curtains. The first time useInfiniteQuery runs it will fetch page = 1 then getNextPageParam will calculate the next page if any.

We can use hasNextPage to run again useInfinitQuery and fetch the next page, isFetchingNextPage indicates that the call is being called, and status tell us if everything was ok or an error occurs.

Maybe it cannot be evident at first, just only seeing a piece of the code, so I invite you to go to my repo and take a better look.

Other cool stuff

I want to include in the future some other cool features React Query has.
Prefetching allows you to fetch the data before it's needed, ideal for the cases that you can anticipate what the user will need.
Optimistic Updates will do the obvious, but the cool thing is that you can rollback your update if anything went wrong.
Also, I recommend looking at how caching works.

Devtools

React Query has a great devtools feature that can be easily being installed. It will show you the current state of your app.



 import { ReactQueryDevtools } from 'react-query/devtools'

 function App() {
   return (
     <QueryClientProvider client={queryClient}>
       {/* The rest of your application */}
       <ReactQueryDevtools initialIsOpen={false} />
     </QueryClientProvider>
   )
 }

Final Thoughts

React Query is a powerful tool but doesn't completely replace other global state managers such as Redux or Mobx. There are some cases where React Query can work very well with other client-state libraries.

I hope this gave you an overlook of this awesome tool. Feel free to leave a comment with suggestions, questions, or if you think some changes have to be done in the repo.

OtamNitram / movies-react-query

Welcome to movies-react-query 👋

An example of react app using react-query and tailwind CSS

Prerequisites

node >=14.15.4 <15.0
npm >=7.0.0

Install

npm install

Usage

npm run start

Run tests

npm run test

Author

👤 Martin Mato

Website: https://www.linkedin.com/in/martinmato/
Twitter: @otamnitram
Github: @otamnitram
LinkedIn: @martinmato

Show your support

Give a ⭐️ if this project helped you!

View on GitHub

Thank you for reading!

React useEffect cleanup: How and when to use it

Martín Mato — Thu, 14 May 2020 17:19:51 +0000

Did you ever got the following error?


Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

The message is straightforward. We're trying to change the state of a component, even after it's been unmounted and unavailable.

There are multiple reasons why this can happen but the most common are that we didn’t unsubscribe to a websocket component, or this were dismount before an async operation finished.

How can we fix this?

Cleanup function in the useEffect hook.

The useEffect hook is built in a way that if we return a function within the method, this function will execute when the component gets disassociated. This is very useful because we can use it to remove unnecessary behavior or prevent memory leaking issues.

So, if we want to cleanup a subscription, the code would look like this:

useEffect(() => {
    API.subscribe()
    return function cleanup() {
        API.unsubscribe()
    }
})

Don't update the state on an unmounted component

One common implementation is to update the component state once an async function finishes. But what happen if the component unmounts after finishing? It will try to set the state anyway if we not control that.

In a real scenario, it happened to me on React Native that an user can leave a screen before a process ends.

In the following example, we have an async function that performs some operation and while this is running I want render a “loading” message. Once the function finish I will change the state of “loading” and render another message.

function Example(props) {
    const [loading, setloading] = useState(true)

    useEffect(() => {
        fetchAPI.then(() => {
            setloading(false)
        })
    }, [])

    return <div>{loading ? <p>loading...</p> : <p>Fetched!!</p>}</div>
}

But, if we exit the component and fetchAPI ends and sets the loading state, this will prompt the error mentioned at the beginning. So we need to be sure that the component is still mounted when fetchAPI is finished.

function Example(props) {
    const [loading, setloading] = useState(true)

    useEffect(() => {
        let mounted = true
        fetchAPI.then(() => {
            if (mounted) {
                setloading(false)
            }
        })

        return function cleanup() {
            mounted = false
        }
    }, [])

    return <div>{loading ? <p>loading...</p> : <p>Fetched!!</p>}</div>
}

This way we can ask if the component is still mounted. Just adding a variable that will change to false if we dismount.

Extra: Cancel an Axios request

Axios comes with a cancellation option to finish a request before it ends. This is useful besides the cleanup function to prevent memory leaking.

useEffect(() => {
    const source = axios.CancelToken.source()

    const fetchUsers = async () => {
        try {
            await Axios.get('/users', {
                cancelToken: source.token,
            })
            // ...
        } catch (error) {
            if (Axios.isCancel(error)) {
            } else {
                throw error
            }
        }
    }

    fetchData()

    return () => {
        source.cancel()
    }
}, [])

Conclusion

There's a lot of other usages of the cleanup function on the useEffect hook, but I hope this can give you a better perspective of how and when to use it.
Please add any comment or suggestion, I will appreciate.

Sorting your imports correctly in React

Martín Mato — Mon, 13 Apr 2020 15:03:57 +0000

While I am preparing my next article, I wanted to share with you this short post with an excellent configuration for your React or React Native apps.

Sorting your imports in a JS file has a lot of benefits. First at all makes it easier to see what you imported from specific packages, also if you group them, you can easily distinguish which imports are from third party packages or local imports.

It is annoying doing all the sorting manually, also, if you are someone who makes abusive use of the VS Code sort-imports like me, then when sharing your code, it is incompatible with the config of other developers. Here is where ESLint can help us.

ESLint to the rescue!.

As we know, ESLint is the most popular linter for javascript. I don't remember not using it in any of my react projects because it is handy to define a set of styling rules to make the code clear and consistent.

ESLint comes with an in-built import sorting rules that even they have beneficial properties, it doesn't fit what I need. So, I use eslint-plugin-import.

eslint-plugin-import is a plugin that extends the ESLint import rules. It doesn't have properties only to organize and to sort; also, it helps to prevent having issues like misspelling file path or packages names, among other things.

My settings

So, you can install the eslint-plugin-import library in your dev dependencies, add in the plugin array in your ESLint config file and start to use it.

One of the things I want to ensure in my react code is that the first import is the React package, just to follow the standard convention. Then, I want to group them separately, first all the third-party packages, and then all the local files.

So my rule is the next one:

"import/order": [
      "error",
      {
        "groups": ["builtin", "external", "internal"],
        "pathGroups": [
          {
            "pattern": "react",
            "group": "external",
            "position": "before"
          }
        ],
        "pathGroupsExcludedImportTypes": ["react"],
        "newlines-between": "always",
        "alphabetize": {
          "order": "asc",
          "caseInsensitive": true
        }
      }
    ],

The groups sets the order intended for every group.
pathGroups can group by path set by a pattern. In this case, I want to look for react import to be before any other import.
pathGroupsExcludedImportTypes defines import types. "React" will be handled as other type so it can be separated for the other external packages.
newlines-between separates each group with a new line in between.
alphabetize sort the order in which group will be sorted. I choose in ascending way and case sensitive.

Once you run ESLint your import statements in the code should look like this:

import React from 'react';

import { PropTypes } from 'prop-types';
import styled from 'styled-components/native';

import ErrorImg from '../../assets/images/error.png';
import colors from '../../styles/colors';

Conclusion

I hope this post can be helpful to someone.
Please feel free to make any suggestions or questions in the comment section.

Thanks for reading.

Throttling and Debouncing. Avoiding unnecessary API calls.

Martín Mato — Fri, 03 Apr 2020 18:46:20 +0000

The problem

There are sometimes that we need to perform actions on certain events controlled by the user. This can be the case of events like click, onPress, mouseMove, etc.
A function runs every time any of those events are triggered, and this can happen more time that is necessary, leading to performances issue.
Imagine a type-ahead functionality in a search bar where we have to retrieve the results from an API. If the user types a four-letter word, it calls the API 4 times, but only the last one is essential.
So, how can we prevent those unnecessary calls and potential API calls?

What is Throttling and Debouncing

Throttling

Throttling is a pattern that we can limit the times it fires an event. So, no matter how many times the user can trigger this, it executes only once in a specific time interval.
This technique can be helpful in a case we know the user can abuse clicking a button. We can just let the event trigger for the first time and not let rerun until x milliseconds passed.

Debouncing

Just like Throttling, Debounce limits the times an event fires. The difference is with this technique, no matter how many times the user fires the event, the function will be executed only after a specific time after the last fired.
It means that in the search bar example, the user can type all the four letters. Still, only x milliseconds after the last onPress() call was triggered, the function executes.

Throttling in javascript

Let's see some code. In this case, we will let the user execute a function only every half a second.

let timeout;
const throttle = (func, limit) => {
  if (!timeout) {
    func();
    timeout = setTimeout(function() {
      timeout = undefined;
    }, limit);
  }
};

Examining the code above:

The throttle function receives 2 parameters. First, the function we want to perform and second the interval time expressed in milliseconds.
When throttle executes for the first time, timeout is undefined as is not initialized. Next, we execute the parameter function and schedule a setTimeout that will set timeout to undefined after the limit milliseconds.
As we are checking timeout, the function won't be executed after the setTimeout and timeout is undefined again. This ensure the function is called only once in an interval.

Debouncing in javascript

For this example, we will have a search box. Every user input will trigger an event, but the function will execute after a delay of 0.2 seconds.

let timeout;
var debounce = function(func, delay) {
  clearTimeout(timeout);

  timeout = setTimeout(func, delay);
};

First time debounce function is called, timeout is undefined so clearTimeout does nothing.
We schedule a setTimout to execute the function after a certain delay
If the function is not called again during that period, clearTimeout won't end the execution of timeout and after delay, func executes.

When to use each one?

As one of the examples, we can use debounce to control the times an API call to search results due to user input in a case of type-ahead functionality.
Also if we have a button or a RefreshControl to force sync data we can limit the times it can be executed using throttle
debounce can also be useful in case we need to wait for the user to stop scrolling to the desired place, finish resizing a windows o to capture the last position of a mousemove.

Libraries to the rescue

As you can see, these two techniques are very helpful and they are very utilized in a lot of projects. So is not strange that there are some libraries which implement them. Here are some of them:

lodash.js: It comes with debounce and throttle built-in.

// Debounce
searchInput.addEventListener("input", _.debounce(search, 200));

// Throttle
button.addEventListener("click", _.throttle(callToAPI, 500);
});

jQuery: There is a project to help us.

// Debounce
$('#searchInput#').keyup($.debounce(200, search));

// Throttle
$('#button#').click($.throttle(500, callToAPI));

throttle-debounce: can be found in npm here

// Debounce
searchInput.addEventListener("input", debounce(200, search));

// Throttle
button.addEventListener("click", throttle(500, callToAPI);
});

Conclusion

I hope this helps you to at least be aware of these two great techniques to avoid extra function executions.
Please give me your thoughts in the comments section. I'm always open to suggestions and tips to getting better in this new adventure for me writing this kind of post.
Thanks for reading!.

My most used javascript methods.

Martín Mato — Sat, 28 Mar 2020 22:28:31 +0000

Being my first post, I want to share something handy but useful, especially if you are in the first steps with Javascript.

I read a lot of posts and articles regarding Javascript methods. I selected those most used for me.

The main idea of using these methods is to avoid the need to use libraries like Lodash, which makes worse the speed of our app and adds, sometimes, extra complexity to the code composition.

Also, it is a good thing to mention that none of these methods mutate the data; this is especially important in React, where we need to avoid unnecessary re-rendering of our app.

So, here are the methods.

.map()
It returns a new array with the result of a function for each element in another array. We can think this is a method like a for but easier to implement. The array returned has the same length as the original array.

Example
An array that contains the double of each item of another array.

const numbers = [100, 200, 300];
const doubles = numbers.map(n => n * 2);

// doubles = [200, 400, 600]

.filter()
It returns an array with all the elements of another array that meet a determined condition.

Example
Return numbers less than or equal to 100

const numbers = [20, 200, 30, 45, 100, 102];
const result = numbers.filter(n => n <= 100);

// result = [20, 30, 45, 100]

.some()
It returns a bool if at least one element in an array meets a determined condition.

Example
Return true if there is an adult age in the array.

const ages = [20, 13, 12];
const areAdults = ages.some(n => n >= 18);

// areAdults = true

.every()
It returns a bool if all of the elements in an array meets a determined condition.

Example
Return true if all the ages in the array are adult.

const ages = [20, 13, 18, 43];
const allAdults = ages.every(n => n >= 18);

// allAdults = false

Array.from()
It returns an array created from any object with length or an iterable object like a string.

Example
Return an array with each letter of my last name.

const lastName = 'mato';
const lnArray = Array.from(lastName);

// lnArray = ['m','a','t','o']

Object.assign()
It copies one or more source objects to a target object. It replaces all the properties on the target object with the ones in the source objects.

Example 1
Clone an object

const source = { "propA": 1 };
const copy = Object.assign({}, source);

// copy = { "propA": 1 };

Example 2
Multiple sources with different properties

const source1 = { "propA": 1 };
const source2 = { "propB": 2 };
const source3 = { "propC": 3 };
const target = Object.assign(source1, source2, source3);

// target = { "propA": 1, "propB": 2, "propC": 3 };

Example 3
Multiple sources with same properties

const source1 = { "propA": 1, "propB": 2};
const source2 = { "propB": 2 };
const source3 = { "propC": 3 };
const target = Object.assign(source1, source2, source3);

// target = { "propA": 1, "propB": 2, "propC": 3 };

String.split()
It separates a certain string into multiple substrings using a specified separator.

Example
Separate string by commas.

const str = 'text1,text2,text3';
const splitted = str.split(",");

// splitted = ['text1', 'text2', 'text3']

String.slice()
It extracts a section of a string, delimited by two indexes, and returns a new one.

Example

const str = 'alpha,beta,gamma';
const sliced = str.slice(6, 10);

// sliced = 'beta'

String.indexOf()
It finds and return the index of the first occurrence of an string.

Example

const str = 'There is a snake in my boot';
const index = str.indexOf('snake');

// index = 11

Conclution

I hope this was helpful, especially for those who are javascript beginners.
As this is my first post, and I have the intention to write more, please feel free to leave your comments and let me know what I can improve. Also, let me know which are your favorite or most used Javascript methods.

Thanks for reading!

DEV Community: Martín Mato

JS being odd. Some weird things about javascript.

null acting weird.

Number literals as objects

NaN is a number.

Be careful with parseInt()

Check your return

Finishing up

React Query - A practical example.

OtamNitram / movies-react-query

Welcome to movies-react-query 👋

Prerequisites

Install

Usage

Run tests

Author

Show your support

How to use React Query?

Fetching data.

Modifying data in the server.

Pagination and "Load More"

Other cool stuff

Devtools

Final Thoughts

OtamNitram / movies-react-query

Welcome to movies-react-query 👋

Prerequisites

Install

Usage

Run tests

Author

Show your support

React useEffect cleanup: How and when to use it

Cleanup function in the useEffect hook.

Don't update the state on an unmounted component

Extra: Cancel an Axios request

Conclusion

Sorting your imports correctly in React

ESLint to the rescue!.

My settings

Conclusion

Throttling and Debouncing. Avoiding unnecessary API calls.

The problem

What is Throttling and Debouncing

Throttling

Debouncing

Throttling in javascript

Debouncing in javascript

When to use each one?

Libraries to the rescue

Conclusion

My most used javascript methods.

So, here are the methods.

Conclution

`null` acting weird.

`NaN` is a number.

Be careful with `parseInt()`

Check your `return`