This text is about smashing sq. shapes into spherical holes utilizing the drive 🙂
React encourages you to make use of practical method, however what in case you are cussed and need to use courses as a substitute? Nicely, in case you are cussed sufficient, you’ll be able to.
Let’s assume we’re writing a counter, and give you a category:
export class Counter {
non-public _value: quantity;
constructor(initialValue: quantity) {
this._value = initialValue;
}
public get worth(): quantity {
return this._value;
}
public increment(): void {
this.add(1);
}
public decrement(): void {
this.add(-1);
}
public add(n: quantity): void {
this._value += n;
console.log(`worth modified, new worth is: ${this._value}`);
}
}
Then we go and select a UI library and resolve to make use of React, we’re being naive and attempt to use our Counter class inside a practical part, creating a few situations:
import { Counter } from "./counter/Counter.class";
export operate App(): JSX.Ingredient {
const c = new Counter(100);
const c2 = new Counter(-200);
return (
<div className="App">
<part>
<button onClick={() => c.decrement()}>decrement</button>
{c.worth}
<button onClick={() => c.increment()}>increment</button>
</part>
<part>
<button onClick={() => c2.decrement()}>decrement</button>
{c2.worth}
<button onClick={() => c2.increment()}>increment</button>
</part>
</div>
);
}
We hit some buttons and discover out React doesn’t replace the UI, although within the console it is clear the values are getting up to date. Now we might flip a category right into a customized hook, however that’d be no enjoyable.
Allow us to as a substitute take into consideration why the updates don’t happen. The reply is straightforward: props didn’t change, part state didn’t change, no must replace the part. Fairly cheap. So what we might do? Principally we want class strategies to start out forcing React part re-renders, which suggests they should use some hooks.
As Typescript supplies decorators for strategies, we might use a customized decorator that might set off part re-render when occasion methodology is run:
import { useState } from "react";
export operate useReactChangeDetection(
goal: unknown,
propertyKey: string,
descriptor: PropertyDescriptor
): void {
const [, setState] = useState<string | undefined>();
const originalMethod = descriptor.worth;
descriptor.worth = operate (...args: unknown[]) {
const end result = originalMethod.apply(this, args);
setState((prev) => (prev === undefined ? "" : undefined));
return end result;
};
}
What’s attention-grabbing, React doesn’t permit utilizing hooks exterior practical parts or different hooks, so we can’t apply the decorator on to the Counter class, we have to consider one thing else.
Since our aim is to use the hook-decorator to the Counter class, what we might do is writing a customized hook that manufactures a category extending Counter and making use of the decorator to a given methodology identify. In fact that requires us to write down a generic that may extract the strategy names:
export kind ClassMethod<T> = {
[P in keyof T]: T[P] extends (...args: any[]) => any ? P : by no means;
}[keyof T];
Now we are able to create our hook go generate prolonged courses of Counter superclass:
import { useMemo } from "react";
import { ClassMethod } from "../ClassMethod.mannequin";
import { Counter } from "./Counter.class";
import { useReactChangeDetection } from "./useChangeDetection.hook";
export const useCounterClass = (
methodology: ClassMethod<Counter>,
worth: quantity
) => {
class UseCounterClass extends Counter {
@useReactChangeDetection
public override [method](n: quantity): void {
tremendous[method](n);
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
return useMemo(() => new UseCounterClass(worth), []);
};
Word how we override the tremendous methodology and adorn it with the useReactChangeDetection hook, which is now completely effective as it’s used inside a hook. Swapping the new class Counter with our new hook, we are able to even select which class strategies will set off part replace when instantiating:
import { useCounterClass } from "./counter";
export operate App(): JSX.Ingredient {
const c = useCounterClass("add", 100);
const c2 = useCounterClass("decrement", -200);
return (
<div className="App">
<part>
<button onClick={() => c.decrement()}>decrement</button>
{c.worth}
<button onClick={() => c.increment()}>increment</button>
</part>
<part>
<button onClick={() => c2.decrement()}>decrement</button>
{c2.worth}
<button onClick={() => c2.increment()}>increment</button>
</part>
</div>
);
}
There, all of the state is inside class situations and React has to respect the updates, outrageous, is not it? 😀
