Forem: Niya Panamdanam

The OR operator (||) vs Nullish Coalescing (??)

Niya Panamdanam — Tue, 25 Apr 2023 13:57:44 +0000

You may have seen OR operator || used commonly to handle default values. But, there is also the less known nullish coalescing operator ?? that can also help with handling default values. Though similar, there are some key deferences between the two.

The OR operator || returns the first truthy value in a series of expressions. If all expressions evaluate to falsy values, the final expression is returned. This means that the OR operator will return the second expression if the first expression is falsy, even if the second expression is also falsy.

For example, consider the following code:

const x = 0 || false;
console.log(x); // false

In this case, the OR operator returns the second expression false because the first expression 0 is falsy.

The nullish coalescing operator (??) returns the first defined value in a series of expressions. If the first expression is null or undefined, the second expression is returned. This means that the nullish coalescing operator will only return the second expression if the first expression is null or undefined.

For example, consider the following code:

const y = null ?? 'default';
console.log(y); // 'default'

In this case, the nullish coalescing operator returns the second expression default because the first expression null is nullish.

One of the key differences between these two operators is how they handle falsy values. The OR operator considers any falsy value (e.g. 0, '', false) to be equivalent to false, while the nullish coalescing operator only considers null and undefined to be nullish.

For example, consider the following code:

const z = '' || 'default';
console.log(z); // 'default'

const w = '' ?? 'default';
console.log(w); // ''

In this case, the OR operator returns the second expression 'default' because the first expression '' is falsy, while the nullish coalescing operator returns the first expression '' because it is not nullish.

In general, developers should use the nullish coalescing operator when they want to specifically check for null or undefined values, and the OR operator when they want to handle any falsy value. However, it's important to consider the context in which these operators are being used and choose the one for your specific use case.

useImperativeHandle React Hook

Niya Panamdanam — Sun, 11 Dec 2022 19:12:48 +0000

useImperativeHandle is a React hook that allows a child component to expose an imperative API to a parent component. "Imperative" here refers to a direct order or command.

To use imperative handle, the child component must call useImperativeHandle in its render method and pass in a reference to the parent component. The child can then define the imperative API by returning an object from the useImperativeHandle call. The parent can access this API by using the ref prop on the child component.

Here is an example of how to use useImperativeHandle:

// Child component
const Modal = ({forwardedRef}) => {
  const [isOpen, setIsOpen] = useState(false)
  useImperativeHandle(forwardedRef, () => ({
    open: () => {
      setIsOpen(true);
    },
    close: () => {
      setIsOpen(false);
    }
  }))

  return (
     <div>
      <button onClick={() => setIsOpen(false)}>Close</button>
      <p>Modal content</p>
    </div>
   )
}
export default forwardRef(Modal)

// Parent component
const App = () =>{
  const modalRef = useRef(null);

  const handleOpen = () => {
    modalRef.current.open();
  }

  return (
    <div>
      <p>Parent</p>
      <Modal forwardedRef={modalRef}/>
      <button onClick={handleOpen}>Open</button>
    </div>
  );
}

In this example, the Modal component uses useImperativeHandle to define an imperative API for the parent App component to use. The App component can now use the ref prop to open the Modal component. This allows the App component to control the state of the Modal component without re-rendering the whole parent component.

One example of where this might be useful is when you have a custom input component that needs to be controlled by a parent form. The input component might have internal state for managing focus, selection, and other aspects of user interaction. The parent form can use imperative handle to access this state and update the input as necessary, and not worry about every other child component in the parent component re-rendering with the form changes.

Another example is when you have a complex animation or transition that is implemented in a child component. The parent can use imperative handle to trigger the animation or transition and control its behavior. This allows the parent to have full control over the animation without having to know the details of how it is implemented in the child.

useImperativeHandle is a useful tool for creating reusable components that can be easily integrated into a parent component. It allows the child to expose a specific API to the parent, while keeping its internal implementation hidden. This helps to maintain the separation of concerns between the child and parent.

Using .env with React & Node

Niya Panamdanam — Wed, 16 Nov 2022 15:00:00 +0000

_NOTE: This article was originally written on Oct, 2018.

In this article, I’m assuming you have heard of environment variables and may have even seen process.env in some places of your code. If not read this: “process.env: What it is and why/when/how to use it effectively”. The article is a great explainer and gives a really detailed idea on why it’s important to use environment variables.

My application is a single repo app using a Node backend and a React front end. You can find it here: https://github.com/np6176a/feedMe. This means for my project I have two .env files, one for the Node instance and the other for the React instance. FYI for the beginners, you won’t see my .env files in github. In fact you should not ever commit your .env file to GitHub repo and should keep it in .gitignore. This is where you keep your secret keys that you don’t want anyone else using.

The directory structure in my case with the .env files looks like this:

-feedMe
|_  .gitignore
|_  —client
    |_ .env
|_  -server
    |_ server.js
    |_ .env

If you initiated your React app with either Next.Js or Create React App you don’t need any other packages to get going. You can just start by creating your .env file in the root directory of the React App. Then for each key make sure to name it with REACT_APP_ before your key name. So your key name would be REACT_APP_KEY_NAME. The REACT_APP_ is necessary for both Next.Js and Create React App to recognize the key. An example of this use case is:

#Declaring your Secret Key in your .env file
$ REACT_APP_API_KEY = exampleAPIKEY

#Using the above key in code
const apiKey = process.env.REACT_APP_API_KEY

For the Node instance you need to first install dotenv node package in your root directory, in my case in the feedme directory.

$ yarn add dotenv
#or
$ npm install dotenv --save

Then create the .env file inside the directory you have your initial index.js or server.js file that run your Node app. In my case this was inside my server directory. Then define your keys inside the .env file MY_KEY=myexampleAPIkey. You can now use it anywhere in your Node App like so: process.env.MY_KEY.

The above is a very basic rundown on how to start using environment variables for either Node or React applications. Here are some other articles that I found super helpful when learning about environment variables:

JavaScript Debugging

Niya Panamdanam — Mon, 14 Nov 2022 13:00:00 +0000

Debugging javascript can be a frustrating task. In this article I have outlined three ways to help you better debug.

First thing is to open up your dev tools in whatever browser you are using. You can do this by either right clicking and selecting inspect, or the keyboard shortcut Cmd + Opt + I on a mac. You can also press F12 which will open you dev tool with the Console tab in focus. The dev tools in your browser is your interface into seeing how your code is executing in the browser.

For the purposes of this article I’m going to focus on using Chrome and the Chrome dev tools.

Method 1: `console.log()`

The most commonly known Javascript debug method is console.log(). The log method writes a message directly to the console. You can use this to print the values of your javascript variables.

const myFunction = () => {
    // print the value of x with a string label 'x'
    console.log('x', x)

    const number  = myMathFunction(x)
    // print the value of number with a label 'number'
    console.log('number', number)

    const numberPercentage = formatAsPercent(number)
    // print the value of number with a label 'number'
    console.log('numberPercentage', numberPercentage)

    // print my fun string
    console.log('You can just type Hello!!!')

    return numberPercentage

}

In addition to printing your variable value to the console, you can add a little string to name your variable in the console.

You can read more on the console.log() method here https://www.w3schools.com/jsref/met_console_log.asp

Method 2: Breakpoints

You can set breakpoints for your Javascript code in your dev tools. You can do this in Chrome

Go to the Source tab in your Inspect.
Navigate to the your Javascript file and the code.
Then click on the line of code number that is to the left of your code. This will add a break point in your browser for that line of code, so when you refresh it will pause your code on that line.
You the press the play button to have your code continue running.

As you can see in the video while the code is stopped at the breakpoint, you can use the console to show you the value of your variables. In some cases you can also hover over the variable in the lines of your code to see a tooltip display with the value.

Chrome also does a cool thing by letting you add conditional breakpoints. You can read more about that and line break points here https://developer.chrome.com/docs/devtools/javascript/breakpoints/

Method 3: Debugger (my fav <3)

The last method is actually adding debugger to your code in your editor. This adds breakpoints to your code no matter which browser you use. You just need the dev tools for your browser open and as the code runs it will stop at the line you added the debugger

const myFunction = () => {
     const number  = myMathFunction(x)
     debugger

     const numberPercentage = formatAsPercent(number)
     debugger

    return numberPercentage
}

As you can see in the video the code stops at the lines with debugger. You can press the play button in your dev tools to continue running your code. The debugger behaves exactly as it would if you had added breakpoints in the Chrome dev tools.

You can also see that beyond just printing my variable value, in the above example I also called my function formatAsPercent() directly in the console. As long as the debugger is set after you have defined your function you can then call that function in the console. You can also call other native Javascript methods like .map() or .filter().

The reason I personally love this method is that when working with Javascript frameworks like React this is a more reliable way of pausing my code at every re-render. console.logs() can print way too many times sometimes when React re-renders a component multiple times too quickly. This makes it harder to clearly notice a difference in the variable values or figure out when exactly the value changed.

The debugger stops the code at on that line every time the code is re-run. It will pause on every re-render of that component. This means on every re-render I can be sure my variables have the correct values and know when my variable has changed. I can also quickly test out different Javascript methods on my variable directly in the console before committing to my code in my editor.

You can read more about the debugger method here https://www.w3schools.com/js/js_debugging.asp

With the above methods debugging in Javascript can be a less frustrating experience. Happy debugging!

Integrate React Hook Forms with Existing Form Components

Niya Panamdanam — Thu, 03 Jun 2021 03:09:09 +0000

React Hook Form is a form handler that handles validation, error, etc using hooks. The library also has great integration with Typescript. You can read more about the it here: React Hook Form

I found the best part of the library is the ease of integrating it into existing legacy code with minimal adjustments.

The Get Started documentation will walk you through how to use the useForm hook and register option for form elements. This is a great option if you are not using third-party form elements like React Select, Antd, Material UI, or legacy custom form element components.

For our sample case, I have the following UserProfile.jsx component, with a custom input component.

UserProfile.jsx

export const UserProfile = () =>{

 const [userName, setUserName] = useState('')
 const [email, setEmail] = useState('')

const onSubmit = async()=> {
  await axios.post('/user',{userName, email})
    .then(()=>console.log('Success'))
    .catch((e)=> console.error(e))
}

 return (
  <div>
    <CustomInput 
      type='text'
      label='User Name'
      name='userName' 
      value={userName} 
      onChange={setUserName}
    />
    <CustomInput 
      type='text'
      label='Email'
      name='email' 
      value={email} 
      onChange={setEmail}
    />
    <button onClick={onSubmit}>
     Submit
    </button>
  </div>
 )
}

The `CustomInput.jsx` component:

export const CustomInput = (
  {
    name,
    type = 'text',
    label,
    disabled = false,
    value,
    onChange,
  },
) => {
return (
    <>
        <label htmlFor={name}>{label}</labe>
        <input
          value={value}
          onChange={(v) => onChange(v.target.value)}
          type={type}
          disabled={disabled}
        />
    </>
  )
}

In the cases of the third-party libraries, React Hook Form recommends we use the Controller component to wrap the third-party component. You can read more about it here: Controller

We can use the same Controller functionality through the useController hook to update CustomInput.jsx component.

Updated `CustomInput.jsx`

export const CustomInput = (
  {
    name,
    type = 'text',
    label,
    disabled = false,
    controller,
    rules /**A way to set input validation**/
  },
) => {

const { field } = useController({
      name, /**This is the unique identifier used by React Hook Form**/
      rules,
      control,
    })

return (
    <>
      <label htmlFor={name}>{label}</label>
      <div>
        <input
           {...field} /**this allows React Hook Form to handle the value, onChange and other form functionalities**/
          type={type}
          disabled={disabled}
        />
      </div>
    </>
  )
}

Every time the CustomInput component is used it will require the controller prop. Now we modify the parent UserProfile.jsx component to use useForm hook and pass in the controller.

Use `useForm` Hook

First we remove the useState hook and use the useForm hook.

const {controller, handleSubmit} = useForm({
  defaultValues:{
    userName:'',
    email: '',
  }
 })

Update the props

Then update the props passed into the CustomInput Component.

<CustomInput 
      type='text'
      label='User Name'
      name='userName' 
      controller={controller}
      rules={{ required: true}} /** passing in the validation rule**/
    />

Update the button

Next we need to update the button to trigger the handleSubmit from the useForm hooks. This will allow us to use the validated form data in our onSubmit function.

<button 
  onClick={handleSubmit(
    (data)=>onSubmit(data)
   )}
>
  Submit
</button>

Update onSubmit

Last we need to update the onSubmit function to use the correct data.

const onSubmit = async(data) => {
  await axios.post('/user',{
      userName:data.userName, 
      email:data.email
    })
    .then(()=>console.log('Success'))
    .catch((e)=> console.error(e))
}

Our final UserProfile.jsx component looks as follows:

export const UserProfile = () =>{

/**Removed state and replaced it with useForm**/
 const {controller, handleSubmit} = useForm({
  defaultValues:{
    userName:'',
    email: '',
  }
 })

/**Updated the submit function to get validated data from the useForm hook**/
const onSubmit = async(data) => {
  await axios.post('/user',{
      userName:data.userName, 
      email:data.email
    })
    .then(()=>console.log('Success'))
    .catch((e)=> console.error(e))
}

 return (
  <div>
    <CustomInput 
      type='text'
      label='User Name'
      name='userName' 
      controller={controller}
      rules={{ required: true}} /** passing in the validation rule**/
    />
    <CustomInput 
      type='text'
      label='Email'
      name='email' 
      controller={controller}
      rules={{ required: true}}
    />
    <button 
      onClick={handleSubmit((data)=>onSubmit(data))} /**the data passes in the validated input values to the submit function**/
    >
     Submit
    </button>
  </div>
 )
}

With these changes we can continue to use existing form elements, and integrate the powerful tools of React Hook Forms with minimal changes.

Using Custom Events to communicate between legacy jQuery code and new Framework code

Niya Panamdanam — Wed, 02 Jun 2021 17:52:13 +0000

This is an updated version of one my older blogs: Old Post

While writing a new feature using React one of my hurdles was figuring out a way to make the new React code and the old jQuery code communicate with each other. My new component, had to get date and time from the date picker written in jQuery code as users interacted with it. At this time I didn’t have the option to rewrite the date picker in React.

My solution to this problem was to use Custom Events.
The custom event was setup in the jQuery function to dispatch every time it returned a result. Then I setup the React component to listen for this custom event and update state.

Let’s Look At Some Code Samples

The React Component:

const MyComponent ()=> {
    const [dateRange, setDateRange] = useState({from:'', to:''})

    return <div id='containerId' />
}

This component renders a div with an id that I will need for the jQuery to use. My state object has the keys from and to that needs the date and time information from the jQuery date picker.

Part of jQuery Code handling the DatePicker:

setDateTime: function() {
  var from = moment(picker.from).utcOffset(this.utcOffset());
  var to = moment(picker.to).utcOffset(this.utcOffset());

  this.setView(from, to);
}

The above snippet is the small part of a larger file using global variables to trigger the setDateTime function. This then passes the from and to values to other functions in the jQuery file. Functionally the jQuery date picker works well, code wise though its super fragile and impossibly hard to figure how it all connects.

Thankfully the above snippet is all I needed. Every time the setDateTime function was triggered I need it to send the from and to values to my React component.

Adding my custom event:

setDateTime: function() {
  var from = moment(picker.from).utcOffset(this.utcOffset());
  var to = moment(picker.to).utcOffset(this.utcOffset());
  var myEvent = new CustomEvent('dateTimeEvent', 
      { bubbles: true, detail: { dateTime: {from, to} });

    document.querySelector('#containerId').dispatchEvent(myEvent);
  this.setView(from, to);
}

As the from and to are set in the setDateTime function, I have my custom event named myEvent that then bubbles the dateTime object with these values. The event is dispatched to the div with the id='containerId' in my React component. This function does not in any way interfere with the rest of the jQuery code. It just passes the information I need without changing any other existing functionality.

Update the React Component

useEffect(()=>{
  window.addEventListener('dateTimeEvent', 
  onDateTimeChange(e))
},[])

I added the event listener to the useEffect. Any time the setDateTime function in the jQuery is triggered the listener will capture dateTime object and pass it into my function onDateTimeChange.

const onDateTimeChange = (e) => {
   setDateRange({
      from: e.detail.dateTime.from,
      to: e.detail.dateTime.to
   })
}

Every time the onDateTimeChange is triggered it updates state in my React component with the date time value from the jQuery code.

In this way my new React component could coexist with the jQuery date picker without having to worry about the legacy code interfering. Plus the changes to the jQuery code were minimal and didn’t affect any of its existing functions.

What The React Component Looks Like Now

const MyComponent ()=> {
    const [dateRange, setDateRange] = useState({from:'', to:''})

const onDateTimeChange = (e) => {
   setDateRange({
      from: e.detail.dateTime.from,
      to: e.detail.dateTime.to
   })
}

useEffect(()=>{
  window.addEventListener('dateTimeEvent', 
  onDateTimeChange(e))
},[])

    return <div id='containerId' />
}

This was an interim solution that allowed me to continue working on the new feature, without having to do a costly rewrite at the same time.

Forem: Niya Panamdanam

The OR operator (||) vs Nullish Coalescing (??)

useImperativeHandle React Hook

Using .env with React & Node

JavaScript Debugging

Method 1: console.log()

Method 2: Breakpoints

Method 3: Debugger (my fav <3)

Integrate React Hook Forms with Existing Form Components

UserProfile.jsx

The CustomInput.jsx component:

Updated CustomInput.jsx

Use useForm Hook

Update the props

Update the button

Update onSubmit

Using Custom Events to communicate between legacy jQuery code and new Framework code

Let’s Look At Some Code Samples

Part of jQuery Code handling the DatePicker:

Adding my custom event:

Update the React Component

What The React Component Looks Like Now

Method 1: `console.log()`

The `CustomInput.jsx` component:

Updated `CustomInput.jsx`

Use `useForm` Hook