How to check if createMemo should be used?

I'm trying to figure out if using createMemo is or isn't worth it.

I know that for super basic equality checks, there is probably no point.

But what about something slow, like code highlighting?

What I don't understand is that what happens when my content changes. I think the whole function needs to be re-run, so the memo doesn't help.

Or does it, still?

Also, what about the case, when this whole component is just item in a <For> loop. I mean I'm parsing the markdown like this:

const tokens: TokensList = processor.lexer(input)

  return tokens
    .filter((t) => t.type !== 'space')
    .map((t) => {
      if (t.type === 'code') {
        return { type: 'code', content: t.text, lang: t.lang }
      } else {
        const html = processor.parse(t.raw)
        return { type: 'html', content: html }
      }
    })

const tokens: TokensList = processor.lexer(input)

  return tokens
    .filter((t) => t.type !== 'space')
    .map((t) => {
      if (t.type === 'code') {
        return { type: 'code', content: t.text, lang: t.lang }
      } else {
        const html = processor.parse(t.raw)
        return { type: 'html', content: html }
      }
    })

So I have lot of small tokens which is processed in a <For> component, like this:

const tokens = getMarkdownTokens(props.block.content)
      return <For each={tokens}>{(tok) => <TokenDisplay token={tok} />}</For>

const tokens = getMarkdownTokens(props.block.content)
      return <For each={tokens}>{(tok) => <TokenDisplay token={tok} />}</For>

export const CodeDisplay = (props: { token: Extract<MarkdownToken, { type: 'code' }> }) => {
  const highlighted = createMemo(() => {
    if (props.token.lang && hljs.getLanguage(props.token.lang)) {
      return hljs.highlight(props.token.content, { language: props.token.lang }).value
    } else {
      return hljs.highlightAuto(props.token.content).value
    }
  })

  return (
    <pre {...stylex.attrs(styles.base)}>
      <code innerHTML={highlighted()} />
    </pre>
  )
}

export const CodeDisplay = (props: { token: Extract<MarkdownToken, { type: 'code' }> }) => {
  const highlighted = createMemo(() => {
    if (props.token.lang && hljs.getLanguage(props.token.lang)) {
      return hljs.highlight(props.token.content, { language: props.token.lang }).value
    } else {
      return hljs.highlightAuto(props.token.content).value
    }
  })

  return (
    <pre {...stylex.attrs(styles.base)}>
      <code innerHTML={highlighted()} />
    </pre>
  )
}

So what is happening here exactly with Solid? I mean I have a changing Markdown input -> changing array of parsed tokens -> a potentially lot of possible code-reuse for syntax highlighting. Is createMemo helping here or not?

How can I check if it helps? Putting a console.log inside createMemo which should not trigger?

SolidJS•13mo ago•

47 replies

hyperknot

How to check if createMemo should be used?

const tokens: TokensList = processor.lexer(input)

  return tokens
    .filter((t) => t.type !== 'space')
    .map((t) => {
      if (t.type === 'code') {
        return { type: 'code', content: t.text, lang: t.lang }
      } else {
        const html = processor.parse(t.raw)
        return { type: 'html', content: html }
      }
    })

const tokens: TokensList = processor.lexer(input)

  return tokens
    .filter((t) => t.type !== 'space')
    .map((t) => {
      if (t.type === 'code') {
        return { type: 'code', content: t.text, lang: t.lang }
      } else {
        const html = processor.parse(t.raw)
        return { type: 'html', content: html }
      }
    })

So I have lot of small tokens which is processed in a <For> component, like this:

const tokens = getMarkdownTokens(props.block.content)
      return <For each={tokens}>{(tok) => <TokenDisplay token={tok} />}</For>

const tokens = getMarkdownTokens(props.block.content)
      return <For each={tokens}>{(tok) => <TokenDisplay token={tok} />}</For>

export const CodeDisplay = (props: { token: Extract<MarkdownToken, { type: 'code' }> }) => {
  const highlighted = createMemo(() => {
    if (props.token.lang && hljs.getLanguage(props.token.lang)) {
      return hljs.highlight(props.token.content, { language: props.token.lang }).value
    } else {
      return hljs.highlightAuto(props.token.content).value
    }
  })

  return (
    <pre {...stylex.attrs(styles.base)}>
      <code innerHTML={highlighted()} />
    </pre>
  )
}

export const CodeDisplay = (props: { token: Extract<MarkdownToken, { type: 'code' }> }) => {
  const highlighted = createMemo(() => {
    if (props.token.lang && hljs.getLanguage(props.token.lang)) {
      return hljs.highlight(props.token.content, { language: props.token.lang }).value
    } else {
      return hljs.highlightAuto(props.token.content).value
    }
  })

  return (
    <pre {...stylex.attrs(styles.base)}>
      <code innerHTML={highlighted()} />
    </pre>
  )
}

How to check if createMemo should be used?

How to check if createMemo should be used?

Similar Threads

Similar Threads

Similar Threads