gistfile1.txt

const UserRegistration = (props) => {
    const appContext = useContext(AppContext)
    const history = useHistory();
    const [cookies, setCookie, removeCookie] = useCookies(['auth-token']);
    const [messagesCleared, setMessagesCleared] = useState(true)

    useEffect(() => {
        console.log('messagesCleared: ' + messagesCleared) // always appears false...
        
        // doing this to avoid le infinite loopz
        if (!messagesCleared) { appContext.clearAllMessages(); setMessagesCleared(true) }

        return () => {
            if (!messagesCleared) { appContext.clearAllMessages(); setMessagesCleared(true) }
        }
    })

    const registerUser = (event) => {
        event.preventDefault()
        appContext.setLoaded(false)

        let payload = {
            first_name: event.target.first_name.value,
            last_name: event.target.last_name.value,
            email_address: event.target.email_address.value,
            password: event.target.password.value }

        console.log("setting messages cleared")
        setMessagesCleared(false)
        Users.create(payload)
            .then(response => { 
                setCookie('auth-token', response.jwt)

                appContext.setStatusMessage("success", "User successfully registered. Redirecting to home page...")
                appContext.setLoaded(true)
            })
            .catch(error => { 
                console.log(error)
                if (error.response.data.messages) { appContext.setErrorMessages(error.response.data.messages) }
                appContext.setLoaded(true)
            })
    }

    return (
        <form onSubmit={registerUser}>
            <div className="form-group">
                <label htmlFor="first_name">First Name:</label>
                <input name="first_name" type="text" className="form-control" />
            </div>
            <div className="form-group">
                <label htmlFor="last_name">Last Name:</label>
                <input name="last_name" type="text" className="form-control" />
            </div>
            <div className="form-group">
                <label htmlFor="email_address">Email Address:</label>
                <input name="email_address" type="text" className="form-control" />
            </div>
            <div className="form-group">
                <label htmlFor="password">Password:</label>
                <input name="password" type="password" className="form-control" />
            </div>
            <div className="form-group">
                <label htmlFor="password">Confirm Password:</label>
                <input name="password" type="password" className="form-control" />
            </div>
            <div className="form-group">
                <input className="btn btn-primary form-control" type="submit" value="Register" />
            </div>
        </form>
    )
}