This is a contributors guide and NOT a user guide. Please visit these docs if you are using or evaluating SuperTokens.

React

General advice#

Remember to add the JSX pragma and import
Prefer adding components as const X: React.FC<PropType> = (props) => {...} instead of a function returning JSX.Element
When using useEffect:
- If it depends on certain variables inside an object, do not make that object a dependency in the array. Instead, extract the variable from the object before the use effect, and put that variable in the dependency array.
- If you want it to run it just once (similar to componentDidMount), provide it an empty dependency array.
- If applicable, make sure to return a function that runs in case the dependency array has changed (or the component is unmounting). In this function, you can tell the useEffect logic to not change state for example (in case there is an async / await operation happening in it.)
Refrain from returning a component from a function. Instead, make that function itself a functional component. This will prevent that component from unmounting and mounting during rerenders. If you must return a component from a function, then the consumer of that function should use useRef or useMemo.