Check the correct use of hooks
By default most hooks infer types automatically, however here are some typing tips:
useState infers the type according to its initial state, if you don't define that state you can define the type manually, example:
const [message, setMessage] = useProp<string>();
The above statement will define that:
- 1.
messageis of typestring. - 2.
setMessageonly accepts values of typestringor functions that return astring.
useProp will not infer the type from the prop, you must define it, example:
const [message, setMessage] = useProp<string>("message");
Let's remember that useProp has a return api similar to useState, so the previous declaration will define that:
- 1.
messageis of typestring. - 2.
setMessageonly accepts values of typestringor functions that return astring.
both useMemo vs useCallback infer its type based on the callback that builds the memo state, but for certain conditions you may need to force the type return, example:
const message = useMemo<string>(() => "i'am atomico!");
Although useMemo infers that its type is string, you can change the return rules via the first type parameter.
The above statement will define that:
- 1.
messageis of typestring.
This applies equally to useCallback.
useEvent allows defining the detail structure through the type parameter, example:
const dispatch = useEvent<{ id: string }>("MyCustomEvent", { bubbles: true });
dispatch({ id: string });
The above statement will define that:
- 1.The dispatch callback expects an object of type
{id: string}as a parameter.
useRef allows to define through the type parameter the expected value of current in the reference.
const refForm = useRef<HTMLFormElement>();
The above statement defines:
- 1.
refForm?.currentis of the typeHTMLFormElement.
useHost defines that current always exists, so the optional selector is not necessary, the type parameter of useHost allows to define the source Element, example:
const host = useHost<HTMLElement>();
All hooks in Atomico have Type declarations, explore them when importing each hook as a documentation source.
Last modified 1yr ago