Parathan Thiyagalingam

Sharing my learnings....

Page 2 of 2

My 2023 and 2024 Planning

hmm, 2023 overall was a good year for me. There were a lot of days I missed my diet food and to do exercises frequently. To come against this barrier, I enrolled to a Gym in Wellawatta, Colombo near my boarding place. I feel a block in my active lifestyle during my days in Colombo for the office days. Whenever I am back in Jaffna, I loose hopes in doing exercises and maintain healthy and active lifestyle. What I am planning in 2024 is to go for gym during the days in Colombo and do home workouts when I am in Jaffna (As Simple as that).

But still, there is a question on how I am going to be consistent on this? Will have a hashtag something like #MyHealth2024 & #MyGoal2024 and post in Twitter (X).

There are lot of pending things which I was planning for a long day and expecting it to make it as a Goal to be finished in 2024.

  1. This year, I purchased Namaste React course from Akshay Shainy. I took it a serious course and finished till testing the application. But later, due to lack of motivation I left it from there. Will have to focus on building projects on top of it and complete the course fully. – The Goal for #MyGoal2024
  2. Purchased a life-time course access to codedamn, a good looking and decent course setup from the people who created it. May be will have a frequent look from it.
  3. Planning to do some Python + Django project based learning for next year. The Goal for #MyGoal2024
  4. AWS Certified Developer Associate Exam. Already this year, took the exam but got 629 which is near to get passed (720). Will try a new shot and get the certification #MyGoal2024
  5. Need to learn more deeper on Golang. Finishing up the Usemy Golang course #MyGoal2024
  6. Get a good understanding about React Native and get release an app #MyGoal2024

How was 2023?

  • Learnt a lot of work related dos and don’ts
  • Got iPhone 15 Pro and Ai pods Pro 2 this year as an installment from the monthly salary. Thanks to JavaScript and React eco-system. It’s not possible without you guys…
  • I think I have a lot of procrastination things on my mind. Working on lot of things paralelly and stressing out myself. I should think which one should I prioritize and give more importance to my loved one(s). I will be more strict on this from next year onwards.
  • Have to plan up my work annual leaves and be organized from next year onwards. Take care of health alot..

Let’s see how it goes…

Higher Order Component (HOC) in React

Higher Order Component (HOC) is a JavaScript function that takes a React component as input and returns a newly updated component. Using Higher Order Components in React is an advanced technique for reusing component logic.

HOC can be used for the following use cases:

  1. Code reuse, logic, and bootstrap abstraction
  2. Render high jacking
  3. State Abstraction & Manipulation
  4. Props Manipulation

HOC can be used in implementing authentication, error handling, logging, and performance tracking.

Let’s implement the React code and see how it works:

Create a new Counter component:

import {useState} from 'react';
import PropTypes from "prop-types";

function Component1() {  const [count, setCount} = useState(0)  return (
    <div>
      Component1 ${count}
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

PropTypes.propTypes = {
  count: PropTypes.number.isRequired,
  setCount: PropTypes.func.isRequired,
};

export default HOC(Component1);

If we need another Counter then we will create a new component called Component2 and create new state, where we can see the code duplication. Instead of implementing it like that, we will create a new Higher Order Component which will accept a React Node Component, and inside that HOC it will have the state and any other logics of it and return the newly modified component.

import { useState } from "react";

function HOC(Component) {
  function NewComponent() {
    const [count, setCount] = useState(0);
    return <Component count={count} setCount={setCount} />;
  }
  return NewComponent;
}

export default HOC;

So, the NewComponent function passes the state variable and the set state variable to the passed component.

Now, let’s modify Component1 to accept props and wrap Component1 with the HOC component which we wrote just before.

import PropTypes from "prop-types";
import HOC from "./HOC";

function Component1({ count, setCount }) {
  return (
    <div>
      Component1 ${count}
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

PropTypes.propTypes = {
  count: PropTypes.number.isRequired,
  setCount: PropTypes.func.isRequired,
};

export default HOC(Component1);

By wrapping up Component 1 with HOC, the HOC component takes this Component and alters it according to the implementation and returns back. Let’s create another component called Component2 and wrap it with the HOC component as we did for Component1. Now, let’s import both these components in the App.tsx file and see the result.

Hello, there

Hi Everyone,

I am Parathan, a Software Engineer by Profession, and love to do meditation, yoga, and Western dance (to some extent). I am here to share my Software Development-related learning and my knowledge.

For the past few months, I have not been able to concentrate on my new learning path and writing blogs. So, I am taking this site and maintaining this site as a serious one and planning to learn and share something new at least once a week.

Newer posts »