DEV Community

Cover image for ⚛️ Applying Strategy Pattern in React (Part 2)

⚛️ Applying Strategy Pattern in React (Part 2)

Will T. on March 09, 2024

In the first part, we explored the significance of the Strategy pattern in React projects and outlined its implementation. However, the approach pr...
Collapse
 
dscheglov profile image
Dmytro Shchehlov

@itswillt

About the conversion ...

We should go from application, not from the implementation.
Application needs the following:

interface Converter<U extends string> {
  (value: number): { value: number, unit: U }
}
Enter fullscreen mode Exit fullscreen mode

Why do we need a recursion, when logorithms work well??

const largestUnitOf =
  <U extends string>(units: readonly U[], threshould: number = 1_000): Converter<U> =>
  (value: number) => {
    const index = Math.max(
      0, 
      Math.min(
        units.length - 1,
        Math.floor(
          Math.log(value) / Math.log(threshould)
        )
      )
    );

    return { value: value / Math.pow(threshould, index), unit: units[index] }
}

const getWeightInLargestUnits = largestUnitOf(['g', 'kg', 't', 'kt', 'Mt', 'Gt'] as const);
const getFileSizeInLargestUnits = largestUnitOf(['B', 'KB', 'MB', 'GB', 'TB', 'PB'] as const, 1024);
Enter fullscreen mode Exit fullscreen mode

TS Playground

It seems strange ...

Collapse
 
itswillt profile image
Will T.

Hi, thanks for carefully reading through the article and having great feedback!

It's obvious that the logarithm solution works better. However, it's not the point of this article. Like I mentioned in the article, the recursion solution is a straightforward and intuitive one. Even a person without much knowledge about Mathematics can make it out with pure reason and logic. But again, algorithms or performance optimization are not what I want to focus on.

Thanks again for going over the article and showcasing the optimal algorithm. I never thought of using actual Math knowledge for it.

Collapse
 
dscheglov profile image
Dmytro Shchehlov

@itswillt

Firstly, I want to say that trying to write this article is a great effort.
It helps the community and the author's growth, so kudos to you.

However, it's tough to figure out the article's main point, unfortunately.

Let's talk about the title: "Applying Strategy Pattern in React" If we
switch "React" with "Angular" in your examples, does the article
mean something new?

Take the example classes like PricingStrategy; they stay exactly the same.
Even though the Pricing Cards scenario is related to the Strategy pattern,
as I mentioned in a comment on the first part of your article, this approach
might cause problems when trying to localize a site.

Two other cases: they are not about React, and they are not about the
Strategy pattern. The Strategy pattern is one way to satisfy the Open/Closed
principle, but instead of that, we end up with code close to extension without
modification.

So, if we want to illustrate how the Strategy pattern works in React, let's
concentrate on React itself. The Strategy in React has a well-known
incarnation: render/component props.

In your Pricing Card scenario, it could be a discount component that is
injected into the Pricing Card to introduce new functionality. For example,
it could prompt the user to choose how they want to receive bonuses:

  • Get a discount
  • Receive as bonuses
  • Donate to the Ukrainian Army

In various regions or during A/B testing, this could be implemented in
different ways: using a select menu, radio buttons, buttons with links, etc.

Actually A/B testing is a good concern for Strategy

If we want to discuss Strategy in specific domains, such as e-commerce
logic, unit conversion, or even CSS styling, let's focus on that. We can
use React to implement IO in the application, but it is clear that we should
not be talking about "Strategy in React."

Actually in this case, to claim that core algorithm is not a point of article
is a little bit unexpected idea.

So, I'd like to suggest to you -- separate concerns.

Collapse
 
insideee_dev profile image
insideee.dev

Cám ơn anh rất nhiều <3

Collapse
 
itswillt profile image
Will T.

Wait, you’re Vietnamese? We can exchange FB if you’d like to.

Collapse
 
insideee_dev profile image
insideee.dev

Dạ vâng, cám ơn bài viết tâm huyết của anh rất nhiều
facebook.com/share/tTjydVrD61AWBe1...

Collapse
 
anhunghezo profile image
Along

Thank you for sharing!

Cảm ơn anh đã chia sẻ!

Collapse
 
rezk2ll profile image
Khaled Ferjani

Great read, thanks Huy

Collapse
 
longtrangit profile image
longtrangit

It's worth waiting for Part 2!

Collapse
 
quan118 profile image
Quan Nguyen

Love it!

Collapse
 
chloevu148 profile image
Chloe Vu

Like!