Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript React Authentication React Router and Authentication Preserve the User State with Cookies

Joseph Butterfield
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Joseph Butterfield
Full Stack JavaScript Techdegree Graduate 16,430 Points

When to use anonymous expression within setState().

I ran into a problem when I implemented the last code snippet in this lesson for the signOut() function. For reference, these are the two versions of the signOut() function within Context.js

// With anonymous function
signOut = () => {
    this.setState(() => {
      return {
        authenticated: null,
      }
    })
    Cookies.remove('authenticatedUser')
  }
// Without anonymous function, ONLY object with update
signOut = () => {
    this.setState({authenticated: null})
    Cookies.remove('authenticatedUser')
  }

So I believe I am now slightly confused as to when you should pass an anonymous function into the setState() method and when to pass an object into the method. (barring of course, using prevState as we do in prior units)

The completed code provided at the start of the course does not use an anonymous function, but in this lesson we do. WITH the anonymous function, however, I notice that the function breaks. The cookie is not removed, and the app redirect to "/" with the application maintaining the current authenticatedUser AND authenticated: null within the Provider's State.

I realize that an anonymous function must be passed into setState() in components when used in event handlers otherwise the function will execute on render, however, I do not see why including the anonymous function halts the function execution and prevents removing the Cookie in this example.

So when should an anonymous function be used within setState, and when should an object be used. (or is something else in my code causing this to break? it is working without the anonymous function expression AND that is what ships in the completed files)

As far as I can tell that sounds like your last theory is correct -> something else in your code is causing this to break.

There's no considerable difference here between using an anonymous function or not (the only difference being the one you noted: prevState or any other callback parameters).

I believe Guil just likes to always use an anonymous function out of habit/style.