Daily React Hacks

Sometimes you are too lazy to connect the debugger. Sometimes using redux dev tools to monitor the state seems like a daunting task. And these are the scenarios where hacks come into the picture. Here are some daily react hacks

Here are some of the hacks to get a better understanding of what is going on beneath the hood in my react code. Please take note, these are not the best practices, we have already shared lots of best practices here. These are just hacks.

1. Filtering relevant logs by using Prefixes.
   
   Whenever you run a react code (which still is in dev mode),  you console a lot of statements. These statements guide you to the end of the tunnel and allow you to better understand the execution. The problem here though is,   browser’s console is full of red warnings.  Searching your custom logs is quite a task.Just prefix your logs with some identifier like [DEV] or [Info] and filter them in the browser console.
2. Using Ternary Question MarksYou must be using || or && to write conditional logic, but have you tried ?? ?

   const userName = user?.name ?? {};

   This one-liner is simple, it just says if user?.name is undefined return {}.
   So what is the difference between || and ?? ?
   || only checks for falsy conditions, whereas ?? also checks for null  or undefined conditions.

   When to use ??  When the property is accessed by ?. is false.

3. Optional Chaining in Dynamic Properties.How do you access a known attribute from an object? Simple:

   const value = ob1?.ob2?.val

   But what happens when you don’t know the exact property to be accessed?
   Suppose there is a variable qw that holds the name of the attribute. It is simple without optional chaining.

   const value = ob1.ob2[qw];

   But all that null checks go into vain. How to do this with optional chaining?

   const value = ob1?.ob2?.[qw]

4. Using Errors to track trigger points of your functionsWorking with huge codebases, tracing the statements which call a particular function is a nightmare.
   Jet Brains allows you to find all the references of a method, but pinpointing the exact caller is still difficult.
   Well just console an error, you will get the complete call stack. Simple.

   const DummyComponent = () => {
    console.log(Error('here is the call stack'));
     return (
      <div> Some HTML!!! </div>
     )
   }

   And you get the complete call stack, and now you know from where the function was called.

5. Know all about a library function without reading the docs.
   
   Many times you are using some function from a third-party library. You want to know more about the function but don’t want toread the docs.
   There is a hack, just attach it to window [the DOM].
   You have everything on the console now. Play with it and you know which function returns what.

   const DummyComponent = () => {
   window.AWS = AWS
    console.log(Error('here is the call stack'));
     return (
      <div> Some HTML!!! </div>
     )
   }

   And now you have everything provided by AWS SDK on the console by using Daily React Hacks.