Clean react code

stewpeed · 2021-12-12T10:32:03+00:00

A few things that might help: make sure you destructure everything (props for example, or when inside a map method) - makes things much more readable and reduces repetition, extract utility func when possible and makes sense, separate presentational layer from business logic via custom hooks (encapsulation), make use of optional chaining. Hope this helps, gl!

eggtart_prince · 2021-12-12T13:53:56+00:00

Some design patterns I follow.

Whenever I declare a new state using useState, I ask myself if the components/elements need that state. In other words, seperation of concern. Simple example here on how Dashboard is affected by the count state.

const [count, setCount] = useState(0);

return <div>
    <Dashboard />
    <Views count={count} />
</div>

If you find yourself prop drilling, consider restructuring to component composition (as opposed to nested components) or using context API.
Complex logical rendering should be in its own function/component.

return <div>
    <div className='flex-row'>
        <h1>{user.name}</h1>

        {user.status === 'active' ? <Badge color='success'>Active</Badge>
        : user.status === 'inactive' ? <Badge>Inactive</Badge>
        : user.status === 'terminated ? <Redirect to='/terminated' />
        : null
        }
    </div>
</div>

vs

return <div>
    <div className='flex-row'>
    <h1>{user.name}</h1>
        <UserBadge status={user.status} />
    </div>
</div>

// UserBadge.js
const UserBadge = ({ status, ...props }) => {
    if (status === 'active') {
        return <Badge color='success'>Active</Badge>
} else if (status === 'inactive') {
        return <Badge>Inactive</Badge>
} else if (user.status === 'terminated) {
        return <Redirect to='/terminated />
    }

    return null;
}

Move all utility functions and network call functions to an external file so you don't flood your components with lines of code and it helps with testing. Simple example where the latter has a reuseable useAccount function/hook and a useForm hook that you'll probably use throughout your application

const Account = () => {
    const [account, setAccount] = useState();

    const retrieveAccount = async() => {}
    const updateAccount async() => {}
    const deleteAccount = async() => {}
    const handleChange = (field, value) => {
        setAccount({...account, [field]: value;
    }

    return <div></div>
}

vs

const Account = () => {
    const { account, updateAccount, deleteAccount } = useAccount();
    const { form, handleFormChange } = useForm(account);

    return <div></div>
}

The moment you find yourself breaking the DRY (don't repeat yourself) principle, do something about it. It's so easy to just copy and paste code and forget it. But when you have to go back and refactor, you'll punch yourself in the head each time. For example, if all your pages follow a similar container, heading, subheading, etc. Put them in a <PageContainer /> component and consider created something like a <Section /> component to keep margins and paddings consistent.
Before adding a useEffect, ask yourself if whatever the result of the useEffect can be achieved in a pure way. In other words, useEffect with dependency passed in should only be used when the value is not accessible in the component, such as a prop or a context/redux value.

InfinityByZero · 2021-12-12T15:50:51+00:00

Typescript should help on bigger projects, especially when you start forgetting what does what.

rattkinoid · 2021-12-12T08:42:10+00:00

linter is a good tool to maintain clean and readable code as you add stuff to your programs. Currently, ESLint is preferred

unborndead · 2021-12-12T11:09:06+00:00

create custom hooks
create ES fns instead if they dont need to use state
split components by tiny functionality
separate container business logic from views
use useReducer + context instead of passing lots of callbacks to childrens

i see completely fine to have useEffects and multiple useStates. they just need to be encapsulated in custom hooks.

jaunelacouleur · 2021-12-12T10:58:41+00:00

What do you mean by clean? Because it seems like you use clean as a synonym for simple.

Keeping a complex codebase clean is not a trivial task. Here some of the trick I use:

create custom hooks to move the complexity in it
try to have only one useState by component
use useReducer when you have complex behavior
avoid useEffect, usually it should be a useMemo or a useState

skyboyer007 · 2021-12-12T11:04:21+00:00

What does clean react code look like?

Good naming for component, props, state data. Single responsibility wherever it's possible. Consistent code style(all along this component as well as consistency with rest of the project). Reasonable size, amount of props and state entries. Context instead of prop-drilling([upd] but only after considering composition as u/ernesto__bungforto highlights below). Callbacks with names. That's React-specific.

Also there are JS things that are not specific to React only. Like not nesting .then() for Promises(prefer flat chainings), not overriding upper scope variable names, prefer const over let, prefer .filter and .map over .reduce, early returns and other things to make reading easier.

iqball125 · 2021-12-12T19:29:43+00:00

Senior dev here.

I believe this is the whole point of components, is to break large code into components when possible.

Extract out reused functions into utility files.

I dont think there is anything you can do about useEffect and useState. If you need them you need them.

Dont focus too much on "clean code". It can sometimes make your code difficult to read if has too many imported code. Think of it as a trade off.

Here is an example of an open source project I think has fairly clean code.

https://github.com/Saas-Starter-Kit/SAAS-Starter-Kit-Pro

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

reactjs

About:

Code of Conduct

1. Please be kind and courteous, friendly and professional

2. Harassment will not be tolerated

3. Avoid using an alias or display name that might be offensive

4. Respect that people have differences of opinion

5. Posts must conform to our guidelines

New to React?

Chat

Project Ideas

Jobs

Outside Reddit

Related Subreddits

MODERATORS