Example (conditional rendering -- multiple returns vs single return)
// Example: multiple returns (early returns) (preferred)
function Component({ isLoading, data }) {
if (isLoading) return <Loading />;
if (data.length === 0) return <NoData />;
return <SuccessReturn />;
}
// Example: single return (conditional rendering, using logical AND operator)
function Component({ isLoading, data }) {
return (
<>
{isLoading && <Loading />}
{data.length === 0 && <NoData />}
{data.length > 0 && <SuccessReturn />}
</>
);
}
// Example: single return (conditional rendering, using ternary operators)
function Component({ isLoading, data }) {
return isLoading ? (
<Loading />
) : data.length === 0 ? (
<NoData />
) : (
<SuccessReturn />
);
}
* For event handlers:
* use **inline anonymous functions (arrow syntax)** when the handling logic is minimal and straightforward (vs creating an extracted/named event handler function) [**\[1\]**](https://react.dev/learn/responding-to-events#naming-event-handler-props:~:text=Alternatively%2C%20you%20can%20define%20an%20event%20handler%20inline%20in%20the%20JSX)
* use **handleX** syntax for extracted/named event handlers functions [**\[1\]**](https://react.dev/learn/responding-to-events#naming-event-handler-props:~:text=By%20convention%2C%20it%20is%20common%20to%20name%20event%20handlers)
* **X** should be **consistent with the prop name** when possible (onClick prop = handleClick event handler)
* use **onX** syntax for event handler props (component prop names that receive event handler functions) [**\[1\]**](https://react.dev/learn/responding-to-events)
* use **e** when referring to event objects in event handler functions (vs event, etc.) [**\[1\]**](https://react.dev/learn/responding-to-events#stopping-propagation:~:text=By%20convention%2C%20it%E2%80%99s%20usually%20called%20e%2C%20which%20stands%20for%20%E2%80%9Cevent%E2%80%9D)