diff --git a/snippets/LimitedTextarea.md b/snippets/LimitedTextarea.md
index 995e73630..937746e81 100644
--- a/snippets/LimitedTextarea.md
+++ b/snippets/LimitedTextarea.md
@@ -2,41 +2,36 @@
 
 Renders a textarea component with a character limit.
 
-Use the value of the `value` prop to determine the initial `state.content` and `state.characterCount` and the value of the `limit` props to determine the value of `state.limit`.
-Create a method, `handleChange`, which trims the `event.target.value` data if necessary and uses `Component.prototype.setState` to update `state.content` and `state.characterCount`, and bind it to the component's context.
-In the`render()` method, use a`<div>` to wrap both the`<textarea>` and the `<p>` element that displays the character count and bind the `onChange` event of the `<textarea>` to the `handleChange` method.
+Use the `React.useState()` hook to create the `content` state variable and set its value to `value`.
+Create a method `setFormattedContent`, which trims the content of the input if it's longer than `limit`.
+Use the `React.useEffect()` hook to call the `setFormattedContent` method on the value of the `content` state variable.
+Use a`<div>` to wrap both the`<textarea>` and the `<p>` element that displays the character count and bind the `onChange` event of the `<textarea>` to call `setFormattedContent` with the value of `event.target.value`.
 
 ```jsx
-class LimitedTextarea extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      content: props.value,
-      characterCount: props.value.length,
-      limit: props.limit
-    };
-    this.handleChange = this.handleChange.bind(this);
-  }
-  
-  handleChange(event) {
-    let newContent = event.target.value;
-    if(newContent.length >= this.state.limit) newContent = newContent.slice(0, this.state.limit);
-    this.setState(state => ({ content: newContent, characterCount: newContent.length }));
-  }
-  render() {
-    return (
-      <div>
-        <textarea 
-          rows={this.props.rows} 
-          cols={this.props.cols} 
-          onChange={this.handleChange} 
-          value={this.state.content}
-        >
-        </textarea>
-        <p>{this.state.characterCount}/{this.props.limit}</p>
-      </div>
-    );
-  }
+function LimitedTextarea({ rows, cols, value, limit }) {
+  const [content, setContent] = React.useState(value);
+
+  const setFormattedContent = text => {
+    text.length > limit ? setContent(text.slice(0, limit)) : setContent(text);
+  };
+
+  React.useEffect(() => {
+    setFormattedContent(content);
+  }, []);
+
+  return (
+    <div>
+      <textarea
+        rows={rows}
+        cols={cols}
+        onChange={event => setFormattedContent(event.target.value)}
+        value={content}
+      />
+      <p>
+        {content.length}/{limit}
+      </p>
+    </div>
+  );
 }
 ```
 
@@ -46,7 +41,6 @@ ReactDOM.render(
   document.getElementById('root')
 );
 ```
-
 <!-- tags: input,state,class -->
 
 <!-- expertise: 0 -->