Best practice in React components: multiple returns vs single return with conditional content?

[laminesadiki]

Hi everyone 👋

I’d like to get some guidance / best-practice clarification regarding component structure in React, especially in the context of RTK Query usage.

In the RTK Query docs and examples, I see that some components are written using a single return, with conditional logic that assigns JSX to a variable (e.g. content) before returning it, like here is the second example of this section.

Example (simplified):

export const PostsList = () => {
  const {
    data: posts = [],
    isLoading,
    isFetching,
    isSuccess,
    isError,
    error
  } = useGetPostsQuery()

  let content: React.ReactNode

  if (isLoading) {
    content = <Spinner text="Loading..." />
  } else if (isSuccess) {
    content = <Posts posts={posts} />
  } else if (isError) {
    content = <div>{error.toString()}</div>
  }

  return <section>{content}</section>
}

An alternative pattern that many React developers use is early returns / multiple returns, for example:

if (isLoading) return <Spinner />
if (isError) return <Error />
if (isSuccess) return <Posts posts={posts} />

return null

Questions

• Is there a recommended or preferred pattern between:

  • multiple early returns
  • a single return with conditional JSX assignment?

• Are there any readability, maintainability, or performance considerations that justify choosing one approach over the other?

• Is the single-return style used in RTK Query examples mainly for teaching/consistency purposes, or is it considered a best practice?

• I’m particularly interested in guidance for production codebases and team conventions.

I’m particularly interested in guidance for production codebases and team conventions.

Thanks in advance for your insights 🙏

[markerikson]

There's no real best practice here. Components are the same as any other function. Multiple returns are valid. Sometimes they simplify things (handling a loading or error state first, which makes the rest of the code shorter or enabling TS to infer that a data field is defined now). Sometimes they might make it harder to read (have to read the whole function). This is really a preference for you and your team.

[laminesadiki]

Yes, I'm agree with you about the infer of data. otherwise , we need to do checks with isSuccess and data is defined , before assign the success state to the content variable.

[EskiMojo14]

in this case the single return makes sense because no matter the content, you want it wrapped in the section element. using a variable and single return avoids that duplication.

[laminesadiki]

Yes, but we can have a wrapper parent for all the states (error , success , loading ) and early return will be wrapped inside it.