TWIL 2019-11-15

Welcome to TWIL, our weekly treasure trove of micro-learnings in the software development realm! In this edition, join Emily as she demonstrates techniques and commands that can streamline your workflow. Grasp how to improve form interactions in React by managing submission states, and dive into Git mastery with a look at Fixups and Auto-Squashing for cleaner commit histories, and discover the nifty Force-Push Shorthand to expedite updates to your remote repositories. Each nugget is compact yet rich with insights, ready to transform your coding practices week by week.

Better Form Submissions with a useSubmit React Hook

Disable a submit button until an async operation is complete. This technique is particularly beneficial for preventing multiple submissions of the same form.

The core of useSubmit is its ability to manage the submission state. It employs the useState and useEffect hooks from React to monitor the submission status. When a form submission is initiated, the state is set to submitting, disabling the submit button to prevent further clicks. This is achieved through a simple conditional statement: disabled={isSubmitting} in the button component.

const useSubmit = submitFunction => {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);const handleSubmit = async () => {
    try {
      setLoading(true);
      setError(null);
      await submitFunction();
    } catch (error) {
      setError(error);
    } finally {
      setLoading(false);
    }
  };
  return [handleSubmit, loading, error];
};

Implementing useSubmit is straightforward. After defining the hook, it's simply a matter of integrating it into your form component. The hook's logic handles the submission state, which helps you create more user-friendly form interactions in your React applications.

function App() {
  
	const mySubmitFunction = () => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        const rnd = Math.random() * 10;
        rnd <= 5 ? resolve() : reject("Error occurred!");
      }, 2000);
    });
  };

  const [handleSubmit, loading, error] = useSubmit(mySubmitFunction);return (
    <div className="App">
      <button onClick={handleSubmit} disabled={loading}>
        {!loading ? "Click me" : "Loading..."}
      </button>
      {error && <div>{error}</div>}
    </div>
  );
}

Emily Morehouse

Cofounder, Director of Engineering

Fixups and Autosquashing

Autosquashing in git is a method that streamlines the process of tidying up your commit history before merging changes into the main branch. It’s particularly useful for developers who value a clean, understandable commit history — allowing you to automatically reorder and fix up commits based on previous commit messages.

The process begins by making your changes and committing them with messages flagged for squashing, using git commit --fixup= or git commit --squash=.

These commands create new commits that are explicitly marked to be squashed into an older commit. After all changes are made, running git rebase -i --autosquash main starts an interactive rebase session that automatically reorders the commits, placing the fixup or squash commits directly after the commit they are intended to amend. This saves time and reduces the risk of human error during manual rebase sessions.

Why is this beneficial? Autosquashing enhances the clarity of your repository’s history, making it easier for team members to understand the evolution of the codebase. It's especially useful in collaborative environments, where a clear history can significantly aid in code reviews and debugging.

Source: https://thoughtbot.com/blog/autosquashing-git-commits

Emily Morehouse

Cofounder, Director of Engineering

Force-push Shorthand

Force-pushing is an operation in git that allows developers to override the history on a remote repository with their local history. It's particularly useful in scenarios where you need to correct mistakes or tidy up your commit history before sharing your changes. But did you know there’s a shorthand for it?

Instead of typing out git push origin main --force every time, you can use this instead:

# Explicit
git push origin main --force
# - or
git push origin main -f

# Shorthand
git push origin +main

While force-pushing is powerful, remember to use it responsibly. It's best reserved for branches where you're the sole contributor or in situations where your team has agreed upon using it.

Emily Morehouse

Cofounder, Director of Engineering