7 replies

snowberb – 11-30 Mar 28

Imagine that im refactoring a function that does a lot of things. In this case, the handleOnClick of a button.

This function has to check for some query requirements and some additional props. Im creating individual functions for the different logics that it needs. My question is, where should I store those functions? In a separate file? What if the functions needs utility functions like a dispatch and some redux-like action functions? In the same component?

A very short example:
Before

   const onSearchClick = async () => {
        if (x) {
            return;
        }

        const y = ...;
        if (!y) {
            ...
            return;
        }

        if (z) {
            ...
            return;
        }

        if (!check1()) {
            return;
        }

        if (!prop1.x) {
            ...
            return;
        }

        ...
    };

   const onSearchClick = async () => {
        if (x) {
            return;
        }

        const y = ...;
        if (!y) {
            ...
            return;
        }

        if (z) {
            ...
            return;
        }

        if (!check1()) {
            return;
        }

        if (!prop1.x) {
            ...
            return;
        }

        ...
    };

After

   const onSearchClick = async () => {
        if (!checkX()) {
            return;
        }

        if (!checkY()) {
            return;
        }

        if (!checkZ()) {
            return;
        }

        if (!check1()) {
            return;
        }

        if (!check2()) {
            return;
        }
        ...
    };

   const onSearchClick = async () => {
        if (!checkX()) {
            return;
        }

        if (!checkY()) {
            return;
        }

        if (!checkZ()) {
            return;
        }

        if (!check1()) {
            return;
        }

        if (!check2()) {
            return;
        }
        ...
    };

snowberb – 11-30 Mar 28

   const onSearchClick = async () => {
        if (x) {
            return;
        }

        const y = ...;
        if (!y) {
            ...
            return;
        }

        if (z) {
            ...
            return;
        }

        if (!check1()) {
            return;
        }

        if (!prop1.x) {
            ...
            return;
        }

        ...
    };

   const onSearchClick = async () => {
        if (x) {
            return;
        }

        const y = ...;
        if (!y) {
            ...
            return;
        }

        if (z) {
            ...
            return;
        }

        if (!check1()) {
            return;
        }

        if (!prop1.x) {
            ...
            return;
        }

        ...
    };

After

   const onSearchClick = async () => {
        if (!checkX()) {
            return;
        }

        if (!checkY()) {
            return;
        }

        if (!checkZ()) {
            return;
        }

        if (!check1()) {
            return;
        }

        if (!check2()) {
            return;
        }
        ...
    };

   const onSearchClick = async () => {
        if (!checkX()) {
            return;
        }

        if (!checkY()) {
            return;
        }

        if (!checkZ()) {
            return;
        }

        if (!check1()) {
            return;
        }

        if (!check2()) {
            return;
        }
        ...
    };

snowberb – 11-30 Mar 28

snowberb – 11-30 Mar 28

Continue the conversation

Reactiflux

Continue the conversation

Reactiflux

Similar Threads