Avoid defining functions within components

[eliasmalik]

ReactWeek-Martha-Georgia/src/components/QuizQuesAns.js

Lines 23 to 25 in b9507cf

	const randomise = array => {
	array.sort(() => Math.random() - 0.5);
	};

This function doesn't rely on any variables in its enclosing scope, so could be defined outside the component, which makes rendering more performant. Not a big deal for a small app, but good to know going forward.

If you did have a function that referenced variables in the enclosing scope (e.g. index), you can either make the function accept additional parameters or use useCallback which memoises functions defined within the component.

[eliasmalik]

In fact this is a perfect example of something you'd use useCallback for:

ReactWeek-Martha-Georgia/src/components/QuizQuesAns.js

Lines 51 to 55 in b9507cf

	onClick={() => {
	if (index < 15) {
	setIndex(index + 1);
	}
	}}

const Component = (props) => {
  const [index, setIndex] = useState(0);

  const onClick = useCallback(() => if (index < 15) setIndex(index + 1), [index]);

  return (
    <button onClick={onClick} />
  )
}

This also has the benefit of moving some application logic out of the markup, which is ideally as declarative as possible.

[oliverjam]

I would definitely advise using caution to avoid prematurely optimising for things like this though. E.g. useCallback/other types of memoization aren't free. Creating a tiny function every render is super fast in browsers nowadays, so I would only bother to do this if you had actually noticed a performance problem.